修改

src/views/module_tpm/equipmentOnoffSection/EquipmentOnoffSectionList.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="tabPage">
+  <a-card :bordered="false" bodyStyle="padding: 0px 10px 0px 10px;">
     <a-tabs v-model="curtab" @tab-click="tabClick">
       <a-tab-pane tab="图表查询" key="chart">
-        <chartSection v-if="curtab==='chart'"></chartSection>
+        <chartSection v-if="curtab === 'chart'"></chartSection>
       </a-tab-pane>
       <a-tab-pane tab="表格查询" key="grid">
-        <gridSection v-if="curtab==='grid'"></gridSection>
+        <gridSection v-if="curtab === 'grid'"></gridSection>
       </a-tab-pane>
     </a-tabs>
-  </div>
+  </a-card>
 </template>
 
 <script>
-import chartSection from "./chartsection.vue";
-import gridSection from "./gridsection.vue";
+import chartSection from './chartsection.vue'
+import gridSection from './gridsection.vue'
 export default {
-  name: "equipmentonoffsection",
+  name: 'equipmentonoffsection',
   components: {
     gridSection, //表格查询
     chartSection, //图表查询
@@ -25,33 +25,19 @@ export default {
       curtab: 'chart',
       // 遮罩层
       loading: true,
-    };
-  },
-  created() {
+    }
   },
+  created() {},
   methods: {
     // 选择tab标签
     tabClick(tab, event) {
-      this.curtab = tab.name;
+      this.curtab = tab.name
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
-  @import '~@/assets/less/uStyle.less';
+@import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less" scoped>
-.tabPage {
-  min-height: calc(100vh - 104px);
-  margin: 10px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
-  border: 1px solid #dcdfe6;
-  .a-tabs--border-card {
-    border: none;
-    box-shadow: none;
-    ::v-deep .a-tabs__content {
-      padding: 0px;
-    }
-  }
-}
 </style>

src/views/module_tpm/equipmentOnoffSection/gridsection.vue

@@ -87,6 +87,7 @@ export default {
       url: {
         list: '/equipmentOnoffSection/equipmentOnoffSection/listtransverse',
       },
+      dataSource: [],
       // 表头
       columns: [
         {

src/views/module_tpm/equipmentRunStatis/history.vue

@@ -25,8 +25,8 @@
           </a-col>
         </a-row>
       </a-form>
-    </div>
-    <div class="trend-charts" ref="trendCharts" style="width: 100%; height: 1800px"></div>
+    </div>    
+    <div class="trend-charts" ref="trendCharts" :style="{ height: echartsHeight + 'px' }"></div>
   </div>
 </template>
 
@@ -46,6 +46,7 @@ export default {
         day_begin: '',
         day_end: '',
       },
+      dataSource: [],
       // 设备
       equipments: [],
       // 运行
@@ -54,9 +55,81 @@ export default {
       pauseduration: [],
       // 关机
       offduration: [],
+      echartsHeight: window.innerHeight - 350,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 1000,
+        equipmentid: '300889957007361',
+        day: null,
+        tagtype: null,
+      },
       url: {
-        list: '/equipmentOnoffSection/equipmentOnoffSection/gettransverse',
+        list: '/emsStatistics/searchEquipmentDetail',
+      },
+      // 时间
+      timeList: [],
+      // 值
+      tagvalueList: [],
+      // 类型
+      tageTypeList: {
+        electricity: '电量',
+        currentA: 'A相电流',
+        currentB: 'B相电流',
+        currentC: 'C相电流',
+        voltageA: 'A相电压',
+        voltageB: 'B相电压',
+        voltageC: 'C相电压',
+        // power: "功率",
       },
+      // 表头
+      columns: [
+        {
+          title: '#',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          },
+        },
+        {
+          title: '设备名称',
+          align: 'center',
+          dataIndex: 'equipmentid_dictText',
+        },
+        {
+          title: '设备编号',
+          align: 'center',
+          dataIndex: 'equipmentcode',
+        },
+        {
+          title: '日期',
+          align: 'center',
+          dataIndex: 'day',
+        },
+        {
+          title: '总时长(分钟)',
+          align: 'center',
+          dataIndex: 'duration',
+        },
+        {
+          title: '运行时长(分钟)',
+          align: 'center',
+          dataIndex: 'onduration',
+        },
+        {
+          title: '待机时长(分钟)',
+          align: 'center',
+          dataIndex: 'pauseduration',
+        },
+        {
+          title: '关机时长(分钟)',
+          align: 'center',
+          dataIndex: 'offduration',
+        },
+      ],
     }
   },
   created() {},
@@ -71,11 +144,6 @@ export default {
     })
   },
   methods: {
-    // 时间处理
-    onChangeDate(date, dateString) {
-      this.queryParams.day_begin = dateString[0]
-      this.queryParams.day_end = dateString[1]
-    },
     /** 重置按钮操作 */
     resetQuery() {
       this.handleQuery()

src/views/module_tpm/equipmentRunStatis/index.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="tabPage">
+  <a-card :bordered="false" bodyStyle="padding: 0px 10px 0px 10px;">
     <a-tabs v-model="curtab" @tab-click="tabClick">
       <a-tab-pane tab="实时数据" key="realtime">
-        <realtime v-if="curtab==='realtime'"></realtime>
+        <realtime v-if="curtab === 'realtime'"></realtime>
       </a-tab-pane>
       <a-tab-pane tab="历史数据" key="history">
-        <history v-if="curtab==='history'"></history>
+        <history v-if="curtab === 'history'"></history>
       </a-tab-pane>
     </a-tabs>
-  </div>
+  </a-card>
 </template>
 
 <script>
-import realtime from "./realtime.vue";
-import history from "./history.vue";
+import realtime from './realtime.vue'
+import history from './history.vue'
 export default {
-  name: "equipmentRunStatis",
+  name: 'equipmentRunStatis',
   components: {
     realtime, //实时数据
     history, //历史数据
@@ -25,33 +25,19 @@ export default {
       curtab: 'realtime',
       // 遮罩层
       loading: true,
-    };
-  },
-  created() {
+    }
   },
+  created() {},
   methods: {
     // 选择tab标签
     tabClick(tab, event) {
-      this.curtab = tab.name;
+      this.curtab = tab.name
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
-  @import '~@/assets/less/uStyle.less';
+@import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less" scoped>
-.tabPage {
-  min-height: calc(100vh - 104px);
-  margin: 10px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
-  border: 1px solid #dcdfe6;
-  .a-tabs--border-card {
-    border: none;
-    box-shadow: none;
-    ::v-deep .a-tabs__content {
-      padding: 0px;
-    }
-  }
-}
 </style>

src/views/module_tpm/equipmentRunStatis/realtime.vue

@@ -20,16 +20,58 @@
           </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 }"
+        bordered
+        rowKey="equipmentid"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :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 class="trend-charts" ref="trendCharts" style="width: 100%; height: 1800px"></div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
+import { mixinDevice } from '@/utils/mixin'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { httpAction, getAction } from '@/api/manage'
 export default {
   name: '',
+  mixins: [JeecgListMixin, mixinDevice],
   data() {
     return {
       loading: true,
@@ -41,6 +83,7 @@ export default {
         day_begin: '',
         day_end: '',
       },
+      dataSource: [],
       // 设备
       equipments: [],
       // 运行
@@ -49,28 +92,93 @@ export default {
       pauseduration: [],
       // 关机
       offduration: [],
+      echartsHeight: window.innerHeight - 350,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 1000,
+        equipmentid: '300889957007361',
+        day: null,
+        tagtype: null,
+      },
       url: {
-        list: '/equipmentOnoffSection/equipmentOnoffSection/gettransverse',
+        list: '/equipmentOnoffSection/equipmentOnoffSection/listtransverse',
+        list1: '/emsStatistics/searchEquipmentDetail',
+      },
+      // 时间
+      timeList: [],
+      // 值
+      tagvalueList: [],
+      // 类型
+      tageTypeList: {
+        electricity: '电量',
+        currentA: 'A相电流',
+        currentB: 'B相电流',
+        currentC: 'C相电流',
+        voltageA: 'A相电压',
+        voltageB: 'B相电压',
+        voltageC: 'C相电压',
+        // power: "功率",
       },
+      // 表头
+      columns: [
+        {
+          title: '#',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          },
+        },
+        {
+          title: '设备名称',
+          align: 'center',
+          dataIndex: 'equipmentid_dictText',
+        },
+        {
+          title: '设备编号',
+          align: 'center',
+          dataIndex: 'equipmentcode',
+        },
+        {
+          title: '日期',
+          align: 'center',
+          dataIndex: 'day',
+        },
+        {
+          title: '总时长(分钟)',
+          align: 'center',
+          dataIndex: 'duration',
+        },
+        {
+          title: '运行时长(分钟)',
+          align: 'center',
+          dataIndex: 'onduration',
+        },
+        {
+          title: '待机时长(分钟)',
+          align: 'center',
+          dataIndex: 'pauseduration',
+        },
+        {
+          title: '关机时长(分钟)',
+          align: 'center',
+          dataIndex: 'offduration',
+        },
+      ],
     }
   },
   created() {},
   mounted() {
     this.$nextTick(() => {
       var now = this.dateformat(new Date()).substring(0, 10)
-      this.queryParams.date.push(now)
-      this.queryParams.date.push(now)
-      this.queryParams.day_begin = now
-      this.queryParams.day_end = now
+      this.queryParams.day = now
       this.handleQuery()
     })
   },
   methods: {
-    // 时间处理
-    onChangeDate(date, dateString) {
-      this.queryParams.day_begin = dateString[0]
-      this.queryParams.day_end = dateString[1]
-    },
     /** 重置按钮操作 */
     resetQuery() {
       this.handleQuery()
@@ -90,6 +198,38 @@ export default {
 
       return year + '-' + month + '-' + strDate + ' ' + hour + ':' + minute + ':' + second
     },
+    /** 查询设备运行状态时间段列表 */
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      var params = this.getQueryParams() //查询条件
+      params.equipmentid = !params.equipmentid ? '' : params.equipmentid
+      params.day_begin = !params.day_begin ? '' : params.day_begin
+      params.day_end = !params.day_end ? '' : params.day_end
+      this.loading = true
+      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)
+        }
+
+        this.loading = false
+      })
+    },
     handleQuery() {
       var _this = this
       _this.loading = true