新增设备效率统计

src/views/module_tpm/equipmentEfficiency/index.vue

@@ -0,0 +1,387 @@
+<template>
+  <a-card :bordered="false" style="padding: 0px 10px 0px 10px;">
+  <div>
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" :model="queryParams" ref="queryForm">
+        <a-row :gutter="24">
+          <a-col :span="10">
+            <a-form-item label="设备名称">
+              <!-- <j-select-multiple v-model="queryParams.equipmentid" dictCode="tpm_equipment,equipmentname,id" style="width: 100%"/> -->
+              <a-select
+              v-model="queryParams.equipmentids"
+              placeholder="请输入设备名称或设备编号"
+              show-search
+              mode="multiple"
+              :filterOption="filterOptions"
+              @search="searchDevice"
+              @change="handleChange"
+              allowClear>
+                <a-select-option v-for="(item, index) in deviceOptions" :key="index" :value="item.id" :label="item.equipmentname">
+                    <span>{{item.equipmentname}}({{item.equipmentcode}})</span>
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="查询日期">
+              <a-range-picker date-format="YYYY-MM-DD" v-model="queryParams.date" @change="onChangeDate" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="2">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="handleSearch" icon="search">查询</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>    
+    <div class="trend-charts" ref="trendCharts" :style="{ height: echartsHeight + 'px' }"></div>
+
+    <!-- table区域-begin -->
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        :scroll="{ x: true }"
+        style="padding-top:10px"
+        bordered
+        :rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        class="j-table-force-nowrap"
+        @change="handleTableChange"
+      >
+        <template slot="htmlSlot" slot-scope="text">
+          <div v-html="text"></div>
+        </template>
+        <template slot="imgSlot" slot-scope="text, record">
+          <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+          <img
+            v-else
+            :src="getImgView(text)"
+            :preview="record.equipmentid"
+            height="25px"
+            alt=""
+            style="max-width: 80px; font-size: 12px; font-style: italic"
+          />
+        </template>
+        <template slot="fileSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
+            下载
+          </a-button>
+        </template>
+      </a-table>
+    </div>
+  </div>
+  </a-card>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { mixinDevice } from '@/utils/mixin'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { httpAction, getAction } from '@/api/manage'
+import { emsdata } from '@/views/module_ems/energyAnalyse/emsdata'
+import { pvdata } from '../../module_ems/photovoltaic/pvdata'
+export default {
+  name: 'realtime',
+  mixins: [JeecgListMixin, mixinDevice],
+  data() {
+    return {
+      loading: false,
+      dataSource: [],
+      dataInfo: null,
+      times: [],
+      gd02us: [],
+      gd03us: [],
+      gd05us: [],
+      gd06us: [],
+      myChart: null,
+      echartsHeight: window.innerHeight - 450,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        equipmentids: ['1780110297413861377'],
+        date: [],
+        day_begin: '',
+        day_end: '',
+        tagtype: "5",
+      },
+      url: {
+        getEfficiency: '/equipmentOnoffSection/equipmentOnoffSection/getEfficiency',
+        list: '/equipmentOnoffSection/equipmentOnoffSection/getEfficiencyTotal',
+      },
+      deviceOptions: [], // 用于存储设备信息
+      deviceOptionsAll: [],
+      // 时间
+      timeList: [],
+      // 
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1;
+          },
+        },
+        {
+          title: '设备名称',
+          align: 'center',
+          dataIndex: 'equipmentname',
+        },
+        {
+          title: '设备编号',
+          align: 'center',
+          dataIndex: 'equipmentcode',
+        },
+        {
+          title: '开机时长(分钟)',
+          align: 'center',
+          dataIndex: 'onduration',
+        },
+        {
+          title: '待机时长(分钟)',
+          align: 'center',
+          dataIndex: 'pauseduration',
+        },
+        {
+          title: '关机时长(分钟)',
+          align: 'center',
+          dataIndex: 'offduration',
+        },
+      ],
+    }
+  },
+  created() {
+    this.getDeviceOption();
+    this.handleSearch();
+  },
+  mounted() {
+    var day = new Date();
+    var beginday = this.dateformat(new Date(day.setMonth(day.getMonth() - 1))).substring(0, 10)
+    this.queryParams.date.push(beginday)
+
+    var endday = this.dateformat(new Date()).substring(0, 10)
+    this.queryParams.date.push(endday)
+    
+    this.queryParams.day_begin = beginday
+    this.queryParams.day_end = endday
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    // 获取设备下拉列表
+    getDeviceOption(){
+        getAction(`/tpmEquipment/tpmEquipment/selectEquipmentList`).then(res=>{
+            this.deviceOptions = res.result.map((res) => {
+            return {
+                id: res.id,
+                equipmentname: res.equipmentname,
+                equipmentcode: res.equipmentcode,
+            }
+            })
+            // 存一个完整的设备表
+            this.deviceOptionsAll = this.deviceOptions
+        })
+    },
+    // 解决筛选后option不回显问题
+    filterOptions(input, option) {
+    return this.deviceOptions
+    },
+    // 筛选设备
+    searchDevice(value) {
+        // 若输入的值删除，则重新赋完整的设备列表
+        if (value.trim().length === 0) {
+            this.deviceOptions = this.deviceOptionsAll
+        }
+        // 通过判断字符串中是数字还是文字进而判断是通过设备名筛选还是设备编号筛选
+        let panDuan = isNaN(parseFloat(value))
+        if (!panDuan) {
+            let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentcode.includes(value));
+            this.deviceOptions = filteredArray
+        } else {
+            let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentname.includes(value));
+            this.deviceOptions = filteredArray
+        }
+    },
+    handleChange() {
+        this.deviceOptions = [...this.deviceOptionsAll];
+        if (this.queryParams.equipmentids && this.queryParams.equipmentids.length > 5) {
+            this.$message.warning('最多选择5个车站');
+            this.queryParams.equipmentids = this.queryParams.id.slice(0, 5);
+        }
+    },
+    // 时间处理
+    onChangeDate(date, dateString) {
+      this.queryParams.day_begin = dateString[0]
+      this.queryParams.day_end = dateString[1]
+    },
+    dateformat(date) {
+      var year = date.getFullYear()
+      var month = date.getMonth() + 1
+      month = month < 10 ? '0' + month : month
+      var strDate = date.getDate()
+      strDate = strDate < 10 ? '0' + strDate : strDate
+      var hour = date.getHours()
+      hour = hour < 10 ? '0' + hour : hour
+      var minute = date.getMinutes()
+      minute = minute < 10 ? '0' + minute : minute
+      var second = date.getSeconds()
+      second = second < 10 ? '0' + second : second
+
+      return year + '-' + month + '-' + strDate + ' ' + hour + ':' + minute + ':' + second
+    },
+    /** 查询设备运行状态时间段列表 */
+    loadData(arg) {
+    },
+    handleSearch(arg) {
+      var _this = this;
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      if (!this.queryParams.equipmentids) {
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      
+      // 获取图表信息
+      getAction(_this.url.getEfficiency, this.queryParams).then((res) => {
+        if (res.success) {
+          _this.dataInfo = res.result.equipments;
+          _this.times = res.result.times;
+          _this.getList(this.queryParams);
+          _this.initEcharts();
+        } else {
+          this.$message.warning(res.message)
+        }
+      });
+      this.loading = false
+    },
+    
+    // 获取表格信息
+    getList(params) {
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+          this.dataSource = res.result.records || res.result
+          if (res.result.total) {
+            this.ipagination.total = res.result.total
+          } else {
+            this.ipagination.total = 0
+          }
+          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    initEcharts() {
+      var _this = this
+      var chartDom = _this.$refs.trendCharts;
+      _this.myChart && _this.myChart.dispose();
+      _this.myChart = echarts.init(chartDom)
+
+      var legends = [];
+      var seriess = [];
+      var rec = 0;
+      _this.dataInfo.forEach(item => {
+        legends.push(item.equipmentname + '[' + item.equipmentcode + ']');
+        var realdatas = [];
+        item.sectionList.forEach(realdata => {
+            realdatas.push(realdata.onduration);
+        });
+        seriess.push({
+          name: item.equipmentname + '[' + item.equipmentcode + ']',
+          type: 'line',
+          symbol: 'none',
+          sampling: 'lttb',
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' },
+            ],
+          },
+          data: realdatas,
+        });
+        console.log(rec, seriess);
+        rec++;
+      });
+      
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          position: function (pt) {
+            return [pt[0], '20%']
+          },
+        },
+        // title: {
+        //   left: 'left',
+        //   text: '开机数据',
+        // },
+        legend: {
+          data: legends,
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: _this.times,
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: [0, '100%'],
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+            xAxisIndex: 0,
+          },
+          {
+            start: 0,
+            end: 10,
+          },
+          {
+            show: true,
+            yAxisIndex: 0,
+            filterMode: "empty",
+            width: 30,
+            height: "80%",
+            right: "7%",
+          },
+        ],
+        series: seriess,
+      }
+
+      option && _this.myChart.setOption(option)
+
+      window.addEventListener('resize', function () {
+        _this.myChart.resize()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/assets/less/uStyle.less';
+</style>
+<style lang="less">
+.trend-charts {
+  padding: 10px;
+  margin-top: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+</style>