update 线路看板样式优化、能源预览添加单位

src/views/board/components/listItem.vue

@@ -4,7 +4,7 @@
 
     <template v-if="itemData.isAmmeter === '1'">
       <div class="deviceItem itemDiv" ref="listItemTitleRef">
-        <div class="title">
+        <div v-if="itemData.showMonitorCode !== false" class="title">
           {{ itemData.monitorCode }}
         </div>
         <div class="content">
@@ -25,17 +25,9 @@
     </div>
 
 
-    <div v-if="itemData.isAmmeter !== '1'" class="line"
-         :style="`height:${height}px;left:${width + 20 + 20}px;top:${top+20}px`"></div>
-    <div v-if="itemData.isAmmeter !== '1' && itemData.children && itemData.children.length >0" class="line1"
-         :style="`left:${width + 20}px`"></div>
-    <div v-if="itemData.isAmmeter !== '1' && !isRoot" class="line2"></div>
-
-    <div v-if="itemData.isAmmeter === '1'" class="line"
-         :style="`height:${height}px;left:${width + 20}px;top:${top+20}px`"></div>
-    <div v-if="itemData.isAmmeter === '1' && itemData.children && itemData.children.length >0" class="line1"
-         :style="`left:${width}px`"></div>
-    <div v-if="itemData.isAmmeter === '1' && !isRoot" style="width: 40px" class="line2"></div>
+    <div v-if="showVerticalLine" class="line" :style="verticalLineStyle"></div>
+    <div v-if="showHorizontalLineToChildren" class="line1" :style="horizontalLineToChildrenStyle"></div>
+    <div v-if="showHorizontalLineToParent" class="line2" :style="horizontalLineToParentStyle"></div>
 
     <div class="children">
       <!--      <DeviceList v-if="itemData.device" :devices="itemData.device"/>-->
@@ -53,6 +45,40 @@ export default {
   name: 'ListItem',
   components: {DeviceList},
   props: ['itemData', 'isRoot'],
+  computed: {
+    isAmmeter() {
+      return this.itemData.isAmmeter === '1'
+    },
+    hasChildren() {
+      return !!(this.itemData.children && this.itemData.children.length > 0)
+    },
+    showVerticalLine() {
+      return true
+    },
+    showHorizontalLineToChildren() {
+      return this.hasChildren
+    },
+    showHorizontalLineToParent() {
+      return !this.isRoot
+    },
+    verticalLineStyle() {
+      return {
+        height: `${this.height}px`,
+        left: `${this.width + (this.isAmmeter ? 20 : 40)}px`,
+        top: `${this.top + 20}px`
+      }
+    },
+    horizontalLineToChildrenStyle() {
+      return {
+        left: `${this.width + (this.isAmmeter ? 0 : 20)}px`
+      }
+    },
+    horizontalLineToParentStyle() {
+      return {
+        width: this.isAmmeter ? '40px' : '20px'
+      }
+    }
+  },
   data() {
     return {
       height: 0,

src/views/board/lineIndex.vue

@@ -52,8 +52,9 @@ export default {
         vA: 'V', vB: 'V', vC: 'V',
         iA: 'A', iB: 'A', iC: 'A',
         zxyg: 'kwh', fxyg: 'kwh',
+        instantFlow: '',
+        cumulativeFlow: ''
       },
-      fieldFilter: ['vA', 'vB', 'vC', 'iA', 'iB', 'iC', 'zxyg', 'fxyg'],
       list: [],
     }
   },
@@ -61,12 +62,18 @@ export default {
     this.getData()
   },
   methods: {
+    getFieldFilterByType() {
+      if (this.typeData === '2') {
+        return ['vA', 'iA']
+      }
+      return ['instantFlow', 'cumulativeFlow']
+    },
     buildTree(data, fieldUnits, fieldFilter) {
       const map = {};
       const tree = [];
 
       data.forEach(item => {
-        map[item.objId] = {...item, children: [], device: []};
+        map[item.objId] = {...item, children: [], device: [], showMonitorCode: this.typeData !== '2'};
 
         if (item.isAmmeter === "1") {
           map[item.objId].deviceData = fieldFilter
@@ -74,7 +81,7 @@ export default {
               .map(f => ({
                 name: f,
                 value: item[f],
-                units: fieldUnits[f] || ''
+                units: f === 'instantFlow' ? (item.instantUnit || '') : (f === 'cumulativeFlow' ? (item.realtimeUnit || '') : (fieldUnits[f] || ''))
               }));
         }
       });
@@ -92,10 +99,11 @@ export default {
     },
     getData() {
       this.isShow = false
+      const fieldFilter = this.getFieldFilterByType()
       realTimeData({
         monitorType: this.typeData
       }).then(res => {
-        const tree = this.buildTree(res.data, this.fieldUnits, this.fieldFilter);
+        const tree = this.buildTree(res.data, this.fieldUnits, fieldFilter);
         this.list = tree
         this.isShow = true
       })
@@ -139,9 +147,6 @@ export default {
   &::-webkit-scrollbar {
     display: none;
   }
-
-  .list {
-  }
 }
 
 .typeSelect {

src/views/ems/report/energyPreview/index.vue

@@ -12,7 +12,7 @@
             label-width="68px"
           >
             <el-form-item label="能源类型" prop="energyType">
-              <el-select v-model="queryParams.energyType" style="width: 100px" placeholder="请选择能源类型">
+              <el-select v-model="queryParams.energyType" style="width: 100px" placeholder="请选择能源类型" @change="handleEnergyTypeChange">
                 <el-option
                   v-for="item in energyTypeList"
                   :key="item.energyTypeId"
@@ -223,6 +223,7 @@ export default {
       totalConsumption: 0,
       //计量单位
       measurementUnit: 'kW·h',
+      chartInstance: null,
       //采集方式
       dateTypeList: [
         { label: '时', value: '13' },
@@ -242,8 +243,9 @@ export default {
         },
         tooltip: {
           trigger: 'axis',
-          formatter: function(params) {
-            return params.data + 'kW·h'
+          formatter: (params) => {
+            const value = Array.isArray(params) ? params[0]?.data : params?.data
+            return `${value}${this.measurementUnit}`
           },
           textStyle: {
             align: 'left'
@@ -368,22 +370,32 @@ export default {
     this.handleQuery()
   },
   methods: {
-    getDateList(startTime, endTime) {
-      if (this.queryParams.dateType === '13') {
-        return getHoursBetween(startTime, endTime)
-      } else if (this.queryParams.dateType === '10') {
-        return getDatesBetween(startTime, endTime)
-      } else if (this.queryParams.dateType === '7') {
-        return getMonthsBetween(startTime, endTime)
-      } else if (this.queryParams.dateType === '4') {
-        return getYearsBetween(startTime, endTime)
+    updateMeasurementUnit() {
+      const unitMap = {
+        2: 'kW·h',
+        3: 'm³',
+        4: 't',
+        5: 'm³',
+        6: 'm³'
       }
+      this.measurementUnit = unitMap[Number(this.queryParams.energyType)] || 'kW·h'
     },
-    barChart() {
-      var chartDom = document.getElementById('card')
-      var myChart = echarts.init(chartDom)
-      let data = []
-      const createLinearGradient = (startColor, endColor) => ({
+    handleEnergyTypeChange() {
+      this.updateMeasurementUnit()
+      this.handleQuery()
+    },
+    getDateList(startTime, endTime) {
+      const dateTypeHandlerMap = {
+        '13': getHoursBetween,
+        '10': getDatesBetween,
+        '7': getMonthsBetween,
+        '4': getYearsBetween
+      }
+      const handler = dateTypeHandlerMap[this.queryParams.dateType]
+      return handler ? handler(startTime, endTime) : []
+    },
+    createLinearGradient(startColor, endColor) {
+      return {
         x: 0,
         y: 0,
         x2: 0,
@@ -394,56 +406,77 @@ export default {
           { offset: 0, color: startColor },
           { offset: 1, color: endColor }
         ]
-      })
+      }
+    },
+    buildChartSeriesData(rows) {
+      if (!rows.length || parseFloat(rows[0].expendSum || 0) <= 0) {
+        return { xAxisData: [], seriesData: [] }
+      }
+      const dateDataKeys = Object.keys(rows[0]).filter((key) => key.includes('dateData|'))
+      const sortedData = dateDataKeys.map((key) => {
+        const time = `${key.split('dateData|')[1]}:00:00`
+        const value = rows.reduce((sum, item) => sum + parseFloat(item[key] || 0), 0)
+        return {
+          time,
+          value: Number(value.toFixed(2)),
+          timestamp: new Date(time).getTime()
+        }
+      }).sort((a, b) => a.timestamp - b.timestamp)
 
+      return {
+        xAxisData: sortedData.map((item) => item.time.split(':')[0]),
+        seriesData: sortedData.map((item) => item.value)
+      }
+    },
+    buildChartOption() {
       const axisStyle = {
-        axisLabel: { color: '#333', fontSize: 14 },
+        axisLabel: { color: '#333', fontSize: 12 },
         axisTick: { lineStyle: { color: '#384267', width: 1 }, show: true },
         axisLine: { lineStyle: { color: 'rgba(255,255,255,0.1)', width: 1 }, show: true }
       }
-
-      const option = {
+      const barColor = this.createLinearGradient(optionData?.bgColor || '#0a8ff6', '#06f8f7')
+      return {
         grid: {
           containLabel: true,
           left: '2%',
           right: '2%',
-          bottom: '5%',
+          bottom: '10%',
           top: 20
         },
         tooltip: {
           trigger: 'axis',
-          formatter: (params) => `${params[0].name}<br>${params[0].marker} ${params[0].data}kW·h`
+          formatter: (params) => `${params[0].name}<br>${params[0].marker} ${params[0].data}${this.measurementUnit}`
         },
-        xAxis: [
-          {
-            ...axisStyle,
-            data: [],
-            type: 'category',
-            splitLine: { show: false }
+        xAxis: [{
+          ...axisStyle,
+          data: [],
+          type: 'category',
+          splitLine: { show: false },
+          axisLabel: {
+            ...axisStyle.axisLabel,
+            rotate: 0
           }
-        ],
+        }],
         yAxis: {
           ...axisStyle,
           splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,0.1)' } },
-          name: ''
+          name: this.measurementUnit
         },
         dataZoom: [],
         series: [
           {
-            data: data,
+            data: [],
             type: 'bar',
             barMaxWidth: 20,
-            barWidth: '75%',
-            itemStyle: {
-              color: createLinearGradient(optionData?.bgColor || '#0a8ff6', '#06f8f7')
-            }
+            barWidth: '70%',
+            itemStyle: { color: barColor }
           },
           {
-            data: data,
+            data: [],
             type: 'line',
             stack: '总量',
             symbol: 'circle',
-            symbolSize: 8,
+            symbolSize: 6,
             itemStyle: {
               normal: {
                 borderWidth: 2,
@@ -456,63 +489,40 @@ export default {
           }
         ]
       }
-
-      myChart.setOption(option)
+    },
+    barChart() {
+      const chartDom = document.getElementById('card')
+      if (!chartDom) return
+      if (this.chartInstance) {
+        this.chartInstance.dispose()
+      }
+      this.chartInstance = echarts.init(chartDom)
+      this.chartInstance.setOption(this.buildChartOption())
       energyPreviewReportList(this.queryParams).then((response) => {
-        this.dataList = this.handleTree(response.data, 'objId');
-
+        this.dataList = this.handleTree(response.data, 'objId')
         this.loading = false
-        const data = response.data || []
-        if (data.length === 0) return
-        this.totalConsumption = data.reduce((sum, item) => {
-          return sum + parseFloat(item.expendSum || 0);
-        }, 0);
-
-        if (parseFloat(data[0].expendSum) > 0){
-          const keys = Object.keys(data[0])
-          const filteredKeys = keys.filter(item => item.includes('dateData|'));
-
-          const yData = filteredKeys.map(key => {
-            return data.reduce((sum, item) => sum + parseFloat(item[key] || 0), 0).toFixed(2)
-          })
-
-          const timeData = filteredKeys.map(key => key.split('dateData|')[1] + ':00:00')
-
-          const sortedData = timeData.map((time, index) => ({
-            name: time,
-            value: parseFloat(yData[index]),
-            time: new Date(time).getTime()
-          })).sort((a, b) => b.time - a.time);
-
-          console.log(sortedData)
-
-          const xAxisData = sortedData.map(item => item.name.split(':')[0])
-          const seriesData = sortedData.map(item => item.value)
-          myChart.setOption({
-            dataZoom: [{
-              show: true,
-              type: 'slider',
-              bottom: '3%',
-              xAxisIndex: 0,
-              height: 12,
-              start: 0,
-              brushSelect: false,
-              end: (1 / (seriesData.length / 20)) * 100,
-              textStyle: {
-                fontSize: 0,
-                color: 'rgba(0,0,0,0)'
-              }
-            }],
-            xAxis: [{
-              data: xAxisData
-            }],
-            series: [{
-              data: seriesData
-            }, {
-              data: seriesData
-            }]
-          })
-        }
+        const rows = response.data || []
+        this.totalConsumption = rows.reduce((sum, item) => sum + parseFloat(item.expendSum || 0), 0)
+        const { xAxisData, seriesData } = this.buildChartSeriesData(rows)
+        const sliderEnd = seriesData.length <= 20 ? 100 : (20 / seriesData.length) * 100
+        this.chartInstance.setOption({
+          dataZoom: seriesData.length ? [{
+            show: true,
+            type: 'slider',
+            bottom: '3%',
+            xAxisIndex: 0,
+            height: 12,
+            start: 0,
+            brushSelect: false,
+            end: sliderEnd,
+            textStyle: {
+              fontSize: 0,
+              color: 'rgba(0,0,0,0)'
+            }
+          }] : [],
+          xAxis: [{ data: xAxisData }],
+          series: [{ data: seriesData }, { data: seriesData }]
+        })
       })
 
     },
@@ -535,7 +545,7 @@ export default {
       this.energyList = []
       this.timeList.push(
         {
-          title: '用电类型名称',
+          title: '类型名称',
           field: 'unitName',
           align: 'center',
           rowspan: 2
@@ -578,6 +588,7 @@ export default {
     },
     /** 搜索按钮操作 */
     handleQuery() {
+      this.updateMeasurementUnit()
       let dateList = this.getDateList(
         this.queryParams.startTime,
         this.queryParams.endTime
@@ -586,9 +597,11 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
+      this.queryParams.energyType = 2
       this.queryParams.dateType = '10'
       this.queryParams.startTime = ''
       this.queryParams.endTime = ''
+      this.updateMeasurementUnit()
       this.handleQuery()
     },
     // 多选框选中数据

src/views/ems/report/energyStatisticalReport/index.vue

@@ -35,9 +35,9 @@
             <el-select v-model="queryParams.energyType" style="width: 100px" placeholder="请选择能源类型">
               <el-option
                 v-for="item in energyTypeList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                :key="item.energyTypeId"
+                :label="item.energyName"
+                :value="item.energyTypeId"
               ></el-option>
             </el-select>
           </el-form-item>
@@ -87,11 +87,11 @@
           <el-table-column type="selection" width="55" align="center"/>
           <el-table-column label="主键标识" align="center" prop="objId" v-if="columns[0].visible"/>
           <el-table-column label="统计单元编号" align="center" prop="workUnitCode" v-if="columns[1].visible"/>
-          <el-table-column label="统计单元名称" align="center" prop="workUnitName" v-if="columns[2].visible"/>
-          <el-table-column label="耗量(kwh)" align="center" prop="expend" v-if="columns[3].visible"/>
+          <el-table-column label="统计单元名称" align="center" prop="workUnitName" width="200" v-if="columns[2].visible"/>
+          <el-table-column label="耗量" align="center" prop="expend" v-if="columns[3].visible"/>
           <el-table-column label="开始时间" align="center" prop="beginTime" v-if="columns[4].visible"/>
           <el-table-column label="结束时间" align="center" prop="endTime" v-if="columns[5].visible"/>
-          <el-table-column label="仪表值(kwh)" align="center" prop="instrumentValue" v-if="columns[6].visible"/>
+          <el-table-column label="仪表值" align="center" prop="instrumentValue" v-if="columns[6].visible"/>
         </el-table>
 
         <pagination
@@ -113,6 +113,7 @@ import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { energyStatisticalReportList } from '@//api/ems/report/reportPort.js'
 import { parseTime } from '@//utils/ruoyi'
+import { getBaseEnergyTypeList } from '@/api/ems/base/baseEnergyType'
 
 export default {
   name: 'EnergyStatisticalReport',
@@ -146,7 +147,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        energyType: '2',
+        energyType: 2,
         monitorCode: null,
         workUnitCode: null,
         monitorStatus: null,
@@ -169,14 +170,14 @@ export default {
         { key: 0, label: `主键标识`, visible: false },
         { key: 1, label: `统计单元编号`, visible: true },
         { key: 2, label: `统计单元名称`, visible: true },
-        { key: 3, label: `耗量(kwh)`, visible: true },
+        { key: 3, label: `耗量`, visible: true },
         { key: 4, label: `开始时间`, visible: true },
         { key: 5, label: `结束时间`, visible: true },
-        { key: 6, label: `仪表值(kwh)`, visible: true }
+        { key: 6, label: `仪表值`, visible: false }
       ],
       // 能源类型选项
       energyTypeList: [
-        { value: '2', label: '电' },
+        // { value: '2', label: '电' },
         // { value: '3', label: '水' },
         // { value: '4', label: '蒸汽' }
       ]
@@ -188,6 +189,9 @@ export default {
     this.daterangeCollectTime[1] = nowDate + ' 23:59:59'
     this.getList()
     this.getWorkUnitTrees()
+    getBaseEnergyTypeList({}).then(response => {
+      this.energyTypeList = response.data
+    })
   },
   watch: {
     // 根据名称筛选部门树