修改负荷平均功率

ems-ui/src/api/mgr/elecUseH.js

@@ -82,3 +82,10 @@ export function getPowerMaxLoad(query) {
     params: query
   })
 }
+export function getPowerDayMaxLoad(query) {
+  return request({
+    url: '/ems/object/loadIndex/day/getMaxLoad',
+    method: 'get',
+    params: query
+  })
+}

ems-ui/src/views/analysis/power/consume.vue

@@ -1,340 +1,438 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="园区代码" prop="areaCode">
-        <el-input
-            v-model="queryParams.areaCode"
-            placeholder="请输入园区代码"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="设施代码" prop="facsCode">
-        <el-input
-            v-model="queryParams.facsCode"
-            placeholder="请输入设施代码"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="日期" prop="date">
-        <el-date-picker clearable
-                        v-model="queryParams.date"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="请选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAdd"
-            v-hasPermi="['ems:loadIndex:add']"
-        >新增
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="success"
-            plain
-            icon="el-icon-edit"
-            size="mini"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['ems:loadIndex:edit']"
-        >修改
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['ems:loadIndex:remove']"
-        >删除
-        </el-button>
+    <el-row :gutter="10">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
+          <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false"
+            :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+            @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;" />
+        </div>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['ems:loadIndex:export']"
-        >导出
-        </el-button>
+      <el-col :span="20" :xs="24">
+        <div class="container-block">
+          <div style="display: flex;justify-content: space-between;">
+            <SubTitle :title="`平均功率【${selectedLabel}】`" />
+            <el-button-group>
+              <el-button v-for="item in btnGroup" :key="item.name" size="mini"
+                :type="item.name === activeBtn ? 'primary' : ''" :icon="item.icon" @click="btnChange(item)" />
+            </el-button-group>
+          </div>
+          <div class="ctl-container">
+            <el-date-picker v-model="dateRange" type="datetimerange" @change="getPowerChart"
+              :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至"
+              start-placeholder="开始日期" end-placeholder="结束日期" align="right" :clearable="false">
+            </el-date-picker>
+          </div>
+          <el-table v-if="activeBtn == 'table'" :data="powerChartData" max-height="400px">
+            <el-table-column label="日期" align="center" prop="date" width="100" fixed="left">
+            </el-table-column>
+            <el-table-column label="时间" align="center" prop="time" width="100" fixed="left">
+            </el-table-column>
+            <el-table-column label="电流(A)" align="center" show-overflow-tooltip width="200">
+              <template slot-scope="scope">
+                <span>A相:{{ scope.row.la }}A;</span>
+                <span>B相:{{ scope.row.lb }}A;</span>
+                <span>C相:{{ scope.row.lc }}A</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="电压(V)" align="center" show-overflow-tooltip width="200">
+              <template slot-scope="scope">
+                <span>A相:{{ scope.row.ua }}V;</span>
+                <span>B相:{{ scope.row.ub }}V;</span>
+                <span>C相:{{ scope.row.uc }}V</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="有功功率(W)" align="center" show-overflow-tooltip width="250" >
+              <template slot-scope="scope">
+                <span>A相:{{ scope.row.pa }}W;</span>
+                <span>B相:{{ scope.row.pb }}W;</span>
+                <span>C相:{{ scope.row.pc }}W</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="无功功率(W)" align="center" show-overflow-tooltip width="250" >
+              <template slot-scope="scope">
+                <span>A相:{{ scope.row.qa }}W;</span>
+                <span>B相:{{ scope.row.qb }}W;</span>
+                <span>C相:{{ scope.row.qc }}W</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="功率因素" align="center" prop="pf" width="100" />
+          </el-table>
+          <BaseChart v-else width="100%" height="400px" :option="powerLineOptions" />
+          <div style="display: flex;justify-content: space-between;">
+            <SubTitle :title="`最大功率【${selectedLabel}】`" />
+            <el-date-picker v-model="maxPowerDate" type="daterange" @change="getDayMaxLoad"
+              :picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
+              end-placeholder="结束日期" align="right" :clearable="false">
+            </el-date-picker>
+          </div>
+          <BaseChart width="100%" height="400px" :option="maxLoadLineOptions" />
+        </div>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-
-    <el-table v-loading="loading" :data="loadIndexList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" align="center" prop="id" />
-      <el-table-column label="园区代码" align="center" prop="areaCode" />
-       <el-table-column label="园区名称" align="center" prop="areaName" />
-      <el-table-column label="设施代码" align="center" prop="facsCode" />
-      <el-table-column label="设施名称" align="center" prop="facsName" />
-      <el-table-column label="日期" align="center" prop="date" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="电压(V)" align="center" prop="voltage" />
-      <el-table-column label="电流(A) " align="center" prop="amperage" />
-      <el-table-column label="功率(W)" align="center" prop="power" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdate(scope.row)"
-              v-hasPermi="['ems:loadIndex:edit']"
-          >修改
-          </el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['ems:loadIndex:remove']">
-            删除</el-button>
-
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-    />
-
-    <!-- 添加或修改电力负荷设施指标对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="园区代码" prop="areaCode">
-          <el-input v-model="form.areaCode" placeholder="请输入园区代码" />
-        </el-form-item>
-        <el-form-item label="设施代码" prop="facsCode">
-          <el-input v-model="form.facsCode" placeholder="请输入设施代码" />
-        </el-form-item>
-        <el-form-item label="日期" prop="date">
-          <el-date-picker clearable
-                          v-model="form.date"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择日期">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="时间" prop="time">
-          <el-date-picker clearable
-                          v-model="form.time"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="电压 " prop="voltage">
-          <el-input v-model="form.voltage" placeholder="请输入电压 " />
-        </el-form-item>
-        <el-form-item label="电流 " prop="amperage">
-          <el-input v-model="form.amperage" placeholder="请输入电流 " />
-        </el-form-item>
-        <el-form-item label="功率 " prop="power">
-          <el-input v-model="form.power" placeholder="请输入功率 " />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
-<script>
-import { listLoadIndex, getLoadIndex, delLoadIndex, addLoadIndex, updateLoadIndex } from '@/api/mgr/loadIndex';
 
+<script>
+import {getPowerData, getPowerMaxLoad, getPowerDayMaxLoad} from '@/api/mgr/elecUseH'
+import {areaWithFacsCategoryAsTree} from '@/api/basecfg/area'
+import BaseChart from '@/components/BaseChart'
+import SubTitle from '@/components/SubTitle'
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {dateFormat, getDayAgoDate} from '@/utils'
 export default {
-  name: 'LoadIndex',
-  data() {
+  name: 'Comsume',
+  components: {
+    Treeselect,
+    BaseChart,
+    SubTitle
+  },
+  data () {
+    const lastWeek = dateFormat(getDayAgoDate(7), 'yyyy-MM-dd')
+    const nowDay = dateFormat(new Date(), 'yyyy-MM-dd')
     return {
       // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 电力负荷设施指标表格数据
-      loadIndexList: [],
-      // 弹出层标题
-      title: '',
-      // 是否显示弹出层
-      open: false,
+      facsCategory: 'E',
+      facsSubCategory: '',
+      areaName: undefined,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      selectedLabel: '',
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        areaCode: null,
-        facsCode: null,
-        date: null,
-        voltage: null,
-        amperage: null,
-        power: null,
+        areaCode: ''
+      },
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '最近一周',
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', [start, end])
+            }
+          }, {
+            text: '最近一个月',
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              picker.$emit('pick', [start, end])
+            }
+          }, {
+            text: '最近三个月',
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+              picker.$emit('pick', [start, end])
+            }
+          }
+        ]
       },
       // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        areaCode: [
+      areaOptions: [],
+      dateRange: [`${lastWeek} 00:00:00`, `${nowDay} 23:59:59`],
+      activeBtn: 'chart', //--chart图表 --table表格
+      btnGroup: [
+        {
+          name: 'chart',
+          icon: 'el-icon-s-data'
+        },
+        {
+          name: 'table',
+          icon: 'el-icon-menu'
+        }],
+      powerChartData: [],
+      powerMaxLoad: '',
+      maxPowerDate: [`${lastWeek} 00:00:00`, `${nowDay} 23:59:59`],
+      maxLoadData: []
+    }
+  },
+  computed: {
+    powerLineOptions () {
+      const xAxisData = this.powerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0, 5)} `);
+      const yData1 = this.powerChartData.map(item => parseFloat(item.s).toFixed(2));
+      const yData2 = this.powerChartData.map(item => item.p);
+      const yData3 = this.powerChartData.map(item => item.q);
+      return {
+        toolbox: {
+          itemGap: 10,
+          itemSize: 16,
+          right: 10,
+          top: 0,
+          show: true,
+          feature: {
+            magicType: {
+              show: true,
+              type: ['bar', 'line']
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData
+        },
+        yAxis: {
+          name: 'W（瓦）',
+          type: 'value',
+        },
+        dataZoom: [
           {
-            required: true,
-            message: '园区代码不能为空',
-            trigger: 'blur',
+            type: "slider",
+            start: 0,
+            end: 100,
+            height: 10,
+            bottom: '5%',
+            showDetail: false,
+            showDataShadow: false,
+            borderColor: "transparent"
           },
-        ],
-        facsCode: [
           {
-            required: true,
-            message: '设施代码不能为空',
-            trigger: 'blur',
+            type: "inside",
+            start: 0,
+            end: 100,
           },
         ],
-        date: [
+        series: [{
+          name: '视在功率',
+          type: 'line',
+          data: yData1,
+          markLine: {
+            symbol: 'none',
+            silent: true,
+            lineStyle: {normal: {type: 'dashed'}},
+            label: {position: 'end'},
+            data: [
+              {
+                yAxis: this.powerMaxLoad,
+                lineStyle: {width: 1.656, color: '#ff6367'},
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: '#ff6367'
+                  }
+                }
+              },
+            ]
+          },
+          markPoint: {
+            silent: true,
+            data: [
+              {
+                yAxis: this.powerMaxLoad,
+                x: '100%',
+                symbolSize: 0.1,
+                symbolOffset: [0, 0],
+                label: {
+                  textStyle: {color: '#ff6367'},
+                  fontSize: 12,
+                  position: 'left',
+                  formatter: '最高负荷'
+                }
+              },
+            ]
+          },
+        },
+        {
+          name: '有功功率',
+          type: 'line',
+          data: yData2,
+        },
+        {
+          name: '无功功率',
+          type: 'line',
+          data: yData3,
+        },]
+      };
+    },
+    maxLoadLineOptions () {
+      const xAxisData = this.maxLoadData.map(item => item.date);
+      const yData1 = this.maxLoadData.map(item => parseFloat(item.s).toFixed(2));
+      const yData2 = this.maxLoadData.map(item => item.p);
+      const yData3 = this.maxLoadData.map(item => item.q);
+      return {
+        toolbox: {
+          itemGap: 10,
+          itemSize: 16,
+          right: 10,
+          top: 0,
+          show: true,
+          feature: {
+            magicType: {
+              show: true,
+              type: ['bar', 'line']
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData
+        },
+        yAxis: {
+          name: 'W（瓦）',
+          type: 'value',
+        },
+        dataZoom: [
           {
-            required: true,
-            message: '日期不能为空',
-            trigger: 'blur',
+            type: "slider",
+            start: 0,
+            end: 100,
+            height: 10,
+            bottom: '5%',
+            showDetail: false,
+            showDataShadow: false,
+            borderColor: "transparent"
           },
-        ],
-        time: [
           {
-            required: true,
-            message: '时间不能为空',
-            trigger: 'blur',
+            type: "inside",
+            start: 0,
+            end: 100,
           },
         ],
-      },
-    };
+        series: [{
+          name: '视在功率',
+          type: 'line',
+          data: yData1,
+        },
+        {
+          name: '有功功率',
+          type: 'line',
+          data: yData2,
+        },
+        {
+          name: '无功功率',
+          type: 'line',
+          data: yData3,
+        },]
+      };
+    },
+
   },
-  created() {
-    this.getList();
+  watch: {
+    // 根据名称筛选区域树
+    areaName (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  async created () {
+    await this.getAreaList()
+    this.getPowerChart()
+    this.getDayMaxLoad()
   },
   methods: {
-    /** 查询电力负荷设施指标列表 */
-    getList() {
-      this.loading = true;
-      listLoadIndex(this.queryParams).then(response => {
-        this.loadIndexList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        areaCode: null,
-        facsCode: null,
-        date: null,
-        time: null,
-        voltage: null,
-        amperage: null,
-        power: null,
-      };
-      this.resetForm('form');
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm('queryForm');
-      this.handleQuery();
+    btnChange (item) {
+      this.activeBtn = item.name
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = '添加电力负荷设施指标';
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids;
-      getLoadIndex(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = '修改电力负荷设施指标';
-      });
+    getPowerChart () {
+      this.powerMaxLoad = ''
+      this.powerChartData = []
+      const [startTime, endTime] = this.dateRange
+      const params = {
+        startTime,
+        endTime,
+        areaCode: this.queryParams.areaCode,
+        objType: '1',
+      }
+      getPowerData({
+        ...params,
+        pageNum: 1,
+        pageSize: 999
+      }).then(({code, rows}) => {
+        if (code === 200) {
+          this.powerChartData = rows
+        }
+      })
+      getPowerMaxLoad(params).then(({code, data}) => {
+        if (code === 200) {
+          this.powerMaxLoad = parseFloat(data.s).toFixed(2)
+        }
+      })
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs['form'].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateLoadIndex(this.form).then(response => {
-              this.$modal.msgSuccess('修改成功');
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addLoadIndex(this.form).then(response => {
-              this.$modal.msgSuccess('新增成功');
-              this.open = false;
-              this.getList();
-            });
-          }
+    getDayMaxLoad () {
+      const [startTime, endTime] = this.maxPowerDate
+      getPowerDayMaxLoad({
+        startTime,
+        endTime,
+        areaCode: this.queryParams.areaCode,
+        objType: '1',
+      }).then(({code, rows}) => {
+        if (code === 200) {
+          this.maxLoadData = rows || []
         }
-      });
+      })
     },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除电力负荷设施指标编号为"' + ids + '"的数据项？').then(function () {
-        return delLoadIndex(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess('删除成功');
-      }).catch(() => {});
+    // 查询区域列表
+    async getAreaList () {
+      await areaWithFacsCategoryAsTree(this.facsCategory, this.facsSubCategory).then(response => {
+        this.areaOptions = [{
+          id: '-1',
+          label: '全部',
+          children: []
+        }].concat(response.data)
+        this.selectedLabel = '全部'
+        this.queryParams.areaCode = '-1'
+      })
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('ems/loadIndex/export', {
-        ...this.queryParams,
-      }, `loadIndex_${new Date().getTime()}.xlsx`);
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
     },
-  },
-};
+    // 节点单击事件
+    handleNodeClick (data) {
+      this.queryParams.areaCode = data.id
+      this.selectedLabel = data.label
+      this.getPowerChart()
+      this.getDayMaxLoad()
+    },
+  }
+}
 </script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+
+.app-container {
+  ::v-deep .el-tabs__content {
+    overflow: initial;
+  }
+}
+
+.ctl-container {
+  display: flex;
+  justify-content: flex-end;
+  margin: 10px 0;
+}
+</style>

ems-ui/src/views/analysis/power/prod.vue

@@ -155,35 +155,20 @@ export default {
         ],
         dataZoom: [
           {
-            type: 'slider',
-            realtime: true,
+            type: "slider",
             start: 0,
-            // end: 20,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
-            height: 5, //组件高度
-            left: '25%', //左边的距离
-            right: '25%', //右边的距离
-            bottom: '0%', //下边的距离
-            show: true, // 是否展示
-            fillerColor: 'rgba(102, 177, 255,1)', // 滚动条颜色
-            borderColor: 'rgba(17, 100, 210, 0.12)',
-            backgroundColor: 'rgba(232,244,255,0.51)', //两边未选中的滑动条区域的颜色
-            handleSize: 0, //两边手柄尺寸
-            showDetail: false, //拖拽时是否展示滚动条两侧的文字
-            zoomLock: true, //是否只平移不缩放
-            moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
-            startValue: 0, // 从头开始。
-            endValue: 8 // 最多展示几个柱体
+            end: 40,
+            height: 10,
+            bottom: '5%',
+            showDetail: false,
+            showDataShadow: false,
+            borderColor: "transparent"
           },
           {
-            type: 'inside', // 支持内部鼠标滚动平移
+            type: "inside",
             start: 0,
-            // end: 20,
-            startValue: 0, // 从头开始。
-            endValue: 5, // 最多5个
-            zoomOnMouseWheel: false, // 关闭滚轮缩放
-            moveOnMouseWheel: true, // 开启滚轮平移
-            moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
-          }
+            end: 40,
+          },
         ],
         series: [
           {

ems-ui/src/views/index.vue

@@ -50,7 +50,7 @@
               <span>总费用</span>
               <span>344元</span>
             </div>
-            <BaseChart  height="250px" :option="useOptions" />
+            <BaseChart  width="100%" height="250px" :option="useOptions" />
           </div>
 
         </div>
@@ -356,6 +356,7 @@ export default {
   }
   .summary-item {
     flex: 1;
+    flex-shrink: 0;
     display: flex;
     justify-content: space-around;
 

ems-ui/src/views/mgr/poweruse.vue

@@ -30,11 +30,11 @@
         </div>
         <div>
           <div class="ctl-container">
-            <SubTitle title="平均功率【15min】" />
+            <SubTitle title="平均功率-15分钟" />
             <el-date-picker v-model="powerDate" type="datetimerange" @change="getPowerChart"
-                  :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至"
-                  start-placeholder="开始日期" end-placeholder="结束日期" align="right">
-                </el-date-picker>
+              :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至"
+              start-placeholder="开始日期" end-placeholder="结束日期" align="right">
+            </el-date-picker>
           </div>
           <!--柱状图-->
           <div class="container-block" style="margin-top: 20px;">
@@ -97,36 +97,13 @@
             </div>
             <div>
               <div class="ctl-container">
-                <SubTitle title="平均功率【15min】" />
+                <SubTitle title="平均功率-15分钟" />
               </div>
               <!--柱状图-->
               <div class="container-block" style="margin-top: 20px;">
-                <BaseChart width="100%" height="350px" :option="equipPowerLineOptions" />
+                <BaseChart width="100%" height="350px" v-if="activeName !== 'summery'" :option="equipPowerLineOptions" />
               </div>
             </div>
-            <!--表格-->
-            <!-- <el-table v-loading="loading" :data="hList">
-              <el-table-column label="设施" align="center" prop="objName">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.objName }}</span>
-                </template>
-              </el-table-column>>
-              <el-table-column label="日期" align="center" prop="date" width="180">
-                <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="时间" align="center" prop="time">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.time }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="时间序列" align="center" prop="timeIndex" />
-              <el-table-column label="用电量(kW·h)" align="center" prop="elecQuantity" />
-            </el-table>
-
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-              :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
           </div>
         </el-col>
       </el-tab-pane>
@@ -256,7 +233,7 @@ export default {
       powerChartData: [],
       powerMaxLoad: '',
       equipPowerChartData: [],
-      equipPowerMaxLoad:''
+      equipPowerMaxLoad: ''
     }
   },
   watch: {
@@ -327,8 +304,10 @@ export default {
       };
     },
     powerLineOptions () {
-      const xAxisData = this.powerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0,5)} `);
-      const yData = this.powerChartData.map(item => item.p);
+      const xAxisData = this.powerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0, 5)} `);
+      const yData1 = this.powerChartData.map(item => parseFloat(item.s).toFixed(2));
+      const yData2 = this.powerChartData.map(item => item.p);
+      const yData3 = this.powerChartData.map(item => item.q);
       return {
         toolbox: {
           itemGap: 10,
@@ -352,21 +331,15 @@ export default {
             type: 'shadow'
           }
         },
-        legend: {
-          data: ['平均功率']
-        },
         xAxis: {
           type: 'category',
-          // axisLabel: {
-          //   interval: 0,
-          //   // margin: 50, //刻度标签与轴线之间的距离。
-          // },
           data: xAxisData
         },
         yAxis: {
-          name: 'kW（千瓦）',
+          name: 'W（瓦）',
           type: 'value',
         },
+        legend: {},
         dataZoom: [
           {
             type: "slider",
@@ -380,30 +353,29 @@ export default {
           },
           {
             type: "inside",
-            // realtime: true,
             start: 0,
             end: 100,
           },
         ],
         series: [{
-          name: '平均功率',
+          name: '视在功率',
           type: 'line',
-          data: yData,
-          itemStyle: {
-            normal: {
-              color: '#6395FA'
-            }
-          },
+          data: yData1,
           markLine: {
             symbol: 'none',
             silent: true,
             lineStyle: {normal: {type: 'dashed'}},
-            label: {position: 'start'},
+            label: {position: 'end'},
             data: [
               {
                 yAxis: this.powerMaxLoad,
                 lineStyle: {width: 1.656, color: '#ff6367'},
-                label: {show: false}
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: '#ff6367'
+                  }
+                }
               },
             ]
           },
@@ -414,8 +386,9 @@ export default {
                 yAxis: this.powerMaxLoad,
                 x: '100%',
                 symbolSize: 0.1,
+                symbolOffset: [0, 0],
                 label: {
-                  textStyle: {color: '#F59A23'},
+                  textStyle: {color: '#ff6367'},
                   fontSize: 12,
                   position: 'left',
                   formatter: '最高负荷'
@@ -423,12 +396,25 @@ export default {
               },
             ]
           },
-        }]
+        },
+        {
+          name: '有功功率',
+          type: 'line',
+          data: yData2,
+        },
+        {
+          name: '无功功率',
+          type: 'line',
+          data: yData3,
+        },
+        ]
       };
     },
     equipPowerLineOptions () {
-      const xAxisData = this.equipPowerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0,5)} `);
-      const yData = this.equipPowerChartData.map(item => item.p);
+      const xAxisData = this.equipPowerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0, 5)} `);
+      const yData1 = this.equipPowerChartData.map(item => parseFloat(item.s).toFixed(2));
+      const yData2 = this.equipPowerChartData.map(item => item.p);
+      const yData3 = this.equipPowerChartData.map(item => item.q);
       return {
         toolbox: {
           itemGap: 10,
@@ -446,21 +432,19 @@ export default {
             }
           }
         },
+        legend: {},
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
           }
         },
-        legend: {
-          data: ['平均功率']
-        },
         xAxis: {
           type: 'category',
           data: xAxisData
         },
         yAxis: {
-          name: 'kW（千瓦）',
+          name: 'W（瓦）',
           type: 'value',
         },
         dataZoom: [
@@ -481,24 +465,24 @@ export default {
           },
         ],
         series: [{
-          name: '平均功率',
+          name: '视在功率',
           type: 'line',
-          data: yData,
-          itemStyle: {
-            normal: {
-              color: '#6395FA'
-            }
-          },
+          data: yData1,
           markLine: {
             symbol: 'none',
             silent: true,
             lineStyle: {normal: {type: 'dashed'}},
-            label: {position: 'start'},
+            label: {position: 'end'},
             data: [
               {
                 yAxis: this.equipPowerMaxLoad,
                 lineStyle: {width: 1.656, color: '#ff6367'},
-                label: {show: false}
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: '#ff6367'
+                  }
+                }
               },
             ]
           },
@@ -509,8 +493,9 @@ export default {
                 yAxis: this.equipPowerMaxLoad,
                 x: '100%',
                 symbolSize: 0.1,
+                symbolOffset: [0, 0],
                 label: {
-                  textStyle: {color: '#F59A23'},
+                  textStyle: {color: '#ff6367'},
                   fontSize: 12,
                   position: 'left',
                   formatter: '最高负荷'
@@ -518,20 +503,31 @@ export default {
               },
             ]
           },
-        }]
+        },
+        {
+          name: '有功功率',
+          type: 'line',
+          data: yData2,
+        },
+        {
+          name: '无功功率',
+          type: 'line',
+          data: yData3,
+        },
+        ]
       };
     }
   },
   methods: {
     getPowerChart () {
       this.powerMaxLoad = ''
-      this.powerChartData=[]
-      const [ startTime,endTime] = this.powerDate
+      this.powerChartData = []
+      const [startTime, endTime] = this.powerDate
       const params = {
         startTime,
         endTime,
         areaCode: '-1',
-        ObjType: '1',
+        objType: '1',
       }
       getPowerData({
         ...params,
@@ -543,23 +539,23 @@ export default {
         }
       })
       getPowerMaxLoad(params).then(({code, data}) => {
-        if (code === 200) {
-          this.powerMaxLoad = data
+        if (code === 200&&data) {
+          this.powerMaxLoad = parseFloat(data.s).toFixed(2)
         }
       })
     },
     getEquipPowerChart () {
       this.equipPowerMaxLoad = ''
-      this.equipPowerChartData=[]
-      const [ startTime,endTime] = this.dateRange
+      this.equipPowerChartData = []
+      const [startTime, endTime] = this.dateRange
       const params = {
         startTime,
         endTime,
         areaCode: '-1',
-        ObjType: '1',
+        objType: '1',
         facsCategory: 'Z',
-        subCategory: this.activeName,
-        objCode:this.objCode
+        facsSubCategory: this.activeName,
+        objCode: this.objCode
       }
       getPowerData({
         ...params,
@@ -572,7 +568,7 @@ export default {
       })
       getPowerMaxLoad(params).then(({code, data}) => {
         if (code === 200) {
-          this.equipPowerMaxLoad = data
+          this.equipPowerMaxLoad = parseFloat(data.s).toFixed(2)
         }
       })
     },
@@ -783,11 +779,11 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.time-range-buttons{
+.time-range-buttons {
   .is-active {
-  background-color: #409eff;
-  color: white;
-}
+    background-color: #409eff;
+    color: white;
+  }
 }