页面调整

src/pages/kb/indoor/history.vue

@@ -2,10 +2,10 @@
   el-dialog(:title="type==1?'历史数据':'统计图表'", :close-on-click-modal='false', :visible.sync='visible' width='80%' :append-to-body='true')
     el-form(:model='dataForm', size='mini' :inline='true' :rules='dataRule' ,ref='dataForm', @keyup.enter.native='dataFormSubmit()', label-width='120px')
         el-form-item(label='设备名称', prop='name')
-            el-input(v-model='dataForm.name', placeholder='设备名称' )
-        el-form-item(label='设备编号', prop='name')
-            el-input(v-model='dataForm.name', placeholder='设备编号' )
-        el-form-item(label='数据起止阶段', prop='name')
+            el-input(v-model='dataForm.name', placeholder='设备名称' readOnly)
+        el-form-item(label='设备编号', prop='code')
+            el-input(v-model='dataForm.code', placeholder='设备编号' readOnly)
+        el-form-item(label='数据起止阶段', prop='time')
           el-button(
             size="mini",
             type="primary",
@@ -54,10 +54,7 @@ export default {
       pageIndex: 1,
       totalPage: 0,
       visible: false,
-      dataForm: {
-        name: '',
-        dateValue: ''
-      },
+      dataForm: {},
       dataList: [],
       chartList: [
         { id: '11', title: '温度', color: '#21ACFC', data: [] },
@@ -71,6 +68,7 @@ export default {
 
   methods: {
     init(data, type) {
+      this.dataForm = data
       this.type = type
       this.visible = true
       this.currentActive = 1
@@ -85,8 +83,8 @@ export default {
         url: this.$http.adornUrl(`/kanban/getListByTypeAndId`),
         method: 'get',
         params: this.$http.adornParams({
-          resourceId: '',
-          resourceType: '507ba9ae22174e4dbbf32dbf34dd7139', //室内气象站
+          resourceId: this.dataForm.id,
+          resourceType: this.dataForm.type,
           type: this.currentActive,
           page: page || this.pageIndex,
           rows: size || this.pageSize
@@ -107,7 +105,8 @@ export default {
         url: this.$http.adornUrl('/analysis/getSnqxzInfoTj'),
         method: 'get',
         params: this.$http.adornParams({
-          resourceId: '',
+          region: this.dataForm.region,
+          resourceId: this.dataForm.id,
           type: this.currentActive
         })
       }).then((data) => {
@@ -128,13 +127,6 @@ export default {
       } else if (this.type === 2) {
         this.getDataListTb()
       }
-    },
-    showParams(data, type) {
-      console.log(111)
-      this.historyVisible = true
-      this.$nextTick(() => {
-        this.$refs.history.init(data, type)
-      })
     }
   }
 }

src/pages/kb/indoor/index.vue

@@ -46,7 +46,7 @@ card-warp(title="室内气象数据", height="45px", showBackground)
       )
       el-table-column(
         :resizable="false",
-        prop="visitorId",
+        prop="code",
         header-align="center",
         align="center",
         width="240",
@@ -54,7 +54,7 @@ card-warp(title="室内气象数据", height="45px", showBackground)
       )
       el-table-column(
         :resizable="false",
-        prop="visitorId",
+        prop="name",
         header-align="center",
         align="center",
         width="240",
@@ -135,7 +135,7 @@ export default {
     return {
       historyVisible: false,
       activeName: '1',
-      dataList: [{ id: 1 }],
+      dataList: [],
       dataListLoading: false,
       pageSize: 10,
       pageIndex: 1,
@@ -164,9 +164,7 @@ export default {
       }).then((data) => {
         if (data && data.code === 0) {
           console.log('数据', data)
-          // this.dataList = data.page.rows
-
-          // this.tableColums = crecords
+          this.dataList = data.page.rows
           this.totalSize = data.page.total
         } else {
           this.dataList = []

src/pages/kb/outdoor/history.vue

@@ -16,10 +16,10 @@ el-dialog(
     label-width="120px"
   )
     el-form-item(label="设备名称", prop="name")
-      el-input(v-model="dataForm.name", placeholder="设备名称")
-    el-form-item(label="设备编号", prop="name")
-      el-input(v-model="dataForm.name", placeholder="设备编号")
-    el-form-item(label="数据起止阶段", prop="name")
+      el-input(v-model="dataForm.name", placeholder="设备名称" readOnly)
+    el-form-item(label="设备编号", prop="code")
+      el-input(v-model="dataForm.code", placeholder="设备编号" readOnly)
+    el-form-item(label="数据起止阶段", prop="time")
       el-button(
         size="mini",
         type="primary",
@@ -147,10 +147,7 @@ export default {
       pageSize: 10,
       totalPage: 0,
       visible: false,
-      dataForm: {
-        name: '',
-        dateValue: ''
-      },
+      dataForm: {},
       typeList: [
         { name: '当日', id: 1 },
         { name: '本周', id: 2 },
@@ -175,7 +172,7 @@ export default {
 
   methods: {
     init(data, type) {
-      console.log(11111)
+      this.dataForm = data
       this.type = type // 1=>>> 历史数据 / 2=>>> 统计图表
       this.visible = true
       this.currentActive = 1
@@ -199,8 +196,8 @@ export default {
         url: this.$http.adornUrl(`/kanban/getListByTypeAndId`),
         method: 'get',
         params: this.$http.adornParams({
-          resourceId: '',
-          resourceType: '9a570e608d0840499551eca89d76449d', //室外气象站
+          resourceId: this.dataForm.id,
+          resourceType: this.dataForm.type, //室外气象站
           type: this.currentActive,
           page: page || this.pageIndex,
           rows: size || this.pageSize
@@ -236,13 +233,6 @@ export default {
           this.chartList[7].data = data.radiationList
         }
       })
-    },
-    showParams(data, type) {
-      console.log(111)
-      this.historyVisible = true
-      this.$nextTick(() => {
-        this.$refs.history.init(data, type)
-      })
     }
   }
 }

src/pages/kb/outdoor/index.vue

@@ -38,14 +38,14 @@ card-warp(title="室外气象数据", height="45px", showBackground)
       )
       el-table-column(
         :resizable="false",
-        prop="visitorId",
+        prop="code",
         header-align="center",
         align="center",
         label="设备编号"
       )
       el-table-column(
         :resizable="false",
-        prop="visitorId",
+        prop="name",
         header-align="center",
         align="center",
         label="设备名称"
@@ -164,15 +164,12 @@ export default {
   },
   data() {
     return {
-      formData: {
-        code: 'SWQX-001',
-        name: '室外气象站'
-      },
+      formData: {},
       historyVisible: false,
       chartListVisible: false,
       showList: false,
       activeName: '1',
-      dataList: [{ id: 1 }],
+      dataList: [],
       dataListLoading: false,
       pageSize: 50,
       totalPage: 0,
@@ -202,6 +199,7 @@ export default {
   },
   mounted() {
     this.getDataListTb()
+    this.getDataList()
   },
   methods: {
     // 获取数据列表
@@ -217,9 +215,9 @@ export default {
       }).then((data) => {
         if (data && data.code === 0) {
           console.log('数据', data)
-          // this.dataList = data.page.rows
-
-          // this.tableColums = crecords
+          this.dataList = data.page.rows
+          this.formData.name = this.dataList[0].name
+          this.formData.code = this.dataList[0].code
           this.totalSize = data.page.total
         } else {
           this.dataList = []
@@ -249,7 +247,6 @@ export default {
       })
     },
     showParams(data, type) {
-      console.log(111)
       this.historyVisible = true
       this.$nextTick(() => {
         this.$refs.history.init(data, type)

src/pages/kb/power/components/historyDataModal.vue

@@ -7,13 +7,23 @@
     width="1200px"
   >
     <el-form :inline="true">
-      <el-form-item label="设备名称：" style="margin-bottom:0">
-        <el-input size="mini" autocomplete="off"></el-input>
+      <el-form-item label="设备名称：" prop="name" style="margin-bottom: 0">
+        <el-input
+          v-model="dataForm.name"
+          size="mini"
+          autocomplete="off"
+          readOnly
+        ></el-input>
       </el-form-item>
-      <el-form-item label="设备编号：" style="margin-bottom:0">
-        <el-input size="mini" autocomplete="off"></el-input>
+      <el-form-item label="设备编号：" prop="code" style="margin-bottom: 0">
+        <el-input
+          v-model="dataForm.code"
+          size="mini"
+          autocomplete="off"
+          readOnly
+        ></el-input>
       </el-form-item>
-      <el-form-item label="数据起止阶段：" >
+      <el-form-item label="数据起止阶段：">
         <!-- <el-date-picker style="width:172px" size="mini" type="date" placeholder="">
         </el-date-picker>
         <span style="padding:0 10px">至</span>
@@ -22,30 +32,25 @@
         <el-button
           size="mini"
           type="primary"
-          @click="handleDate(index)"
+          @click="handleDate(item.id)"
           v-for="(item, index) in typeList"
           :key="index"
-          :class="[index == currentActive ? 'isActive' : '']"
+          :class="[item.id == currentActive ? 'isActive' : '']"
           >{{ item.name }}
         </el-button>
       </el-form-item>
-      <el-form-item >
-         <el-button size='mini' type="primary" icon="el-icon-download">导出</el-button>
-      </el-form-item>
-
     </el-form>
     <enTable :tableData="historyData" :tableColums="tableColums"></enTable>
-    <div slot="footer">
-      <el-button @click="cancelhandle">取 消</el-button>
-      <el-button type="primary" @click="cancelhandle">确 定</el-button>
-    </div>
+    <tablePagination
+      :pageSize="pageSize"
+      :totalSize="totalPage"
+      @parentMethod="getDataList"
+    ></tablePagination>
   </el-dialog>
 </template>
-<script >
+<script>
 import enTable from '../../../components/enTable'
-const historyData = [
-
-]
+import tablePagination from '@/pages/components/tablePagination'
 const tableColums = [
   {
     label: '功率',
@@ -70,29 +75,61 @@ export default {
   name: 'historyDataModal',
   props: ['historyDataModalVisible'],
   components: {
+    tablePagination,
     enTable
   },
   data() {
     return {
       formLabelWidth: '0px',
-      historyData,
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataForm: {},
+      historyData: [],
       tableColums,
       typeList: [
-        { name: '当日' },
-        { name: '本周' },
-        { name: '当月' },
-        { name: '今年' }
+        { name: '当日', id: 1 },
+        { name: '本周', id: 2 },
+        { name: '当月', id: 3 },
+        { name: '今年', id: 4 }
       ],
-      currentActive: '0'
+      currentActive: 1
     }
   },
   methods: {
+    init(data) {
+      this.dataForm = data
+      this.currentActive = 1
+      this.getDataList() //获取历史数据列表
+    },
+    getDataList(page, size) {
+      this.$http({
+        url: this.$http.adornUrl(`/kanban/getListByTypeAndId`),
+        method: 'get',
+        params: this.$http.adornParams({
+          resourceId: this.dataForm.id, //资源点id
+          resourceType: this.dataForm.type, //资源点类型
+          type: this.currentActive,
+          page: page || this.pageIndex,
+          rows: size || this.pageSize
+        })
+      }).then((data) => {
+        if (data && data.code === 0) {
+          this.historyData = data.page.records
+          this.totalPage = data.page.total
+        } else {
+          this.historyData = []
+          this.totalPage = 0
+        }
+      })
+    },
     cancelhandle() {
       this.$emit('cancelhandle')
     },
     // 当日 ，本周
     handleDate(i) {
       this.currentActive = i
+      this.getDataList()
     }
   }
 }

src/pages/kb/power/components/statisticPicTableModal.vue

@@ -31,29 +31,20 @@
         <el-button
           size="mini"
           type="primary"
-          @click="handleDate(index)"
+          @click="handleDate(item.id)"
           v-for="(item, index) in typeList"
           :key="index"
-          :class="[index == currentActive ? 'isActive' : '']"
+          :class="[item.id == currentActive ? 'isActive' : '']"
           >{{ item.name }}
         </el-button>
       </el-form-item>
-      <el-form-item>
-        <el-button size="mini" type="primary" icon="el-icon-search"
-          >查询</el-button
-        >
-      </el-form-item>
     </el-form>
     <div v-if="statisticModalVisible" id="categoryId" style="height: 400px">
       <chart id="111" :data="data" title="能耗数据" color="#21ACFC"></chart>
     </div>
-    <div slot="footer">
-      <el-button @click="cancelhandlePic">取 消</el-button>
-      <el-button type="primary" @click.stop="cancelhandlePic">确 定</el-button>
-    </div>
   </el-dialog>
 </template>
-<script >
+<script>
 import chart from '@/pages/components/chart.vue'
 export default {
   name: 'statisticPicTableModal',
@@ -64,59 +55,47 @@ export default {
   data() {
     return {
       formLabelWidth: '120px',
+      dataForm: {},
       category: null,
       typeList: [
-        { name: '当日' },
-        { name: '本周' },
-        { name: '当月' },
-        { name: '今年' }
+        { name: '当日', id: 1 },
+        { name: '本周', id: 2 },
+        { name: '当月', id: 3 },
+        { name: '今年', id: 4 }
       ],
-      currentActive: '0',
-      data: [
-        ['2019-8-14 8:00:00', 70],
-        ['2019-8-14 8:00:01', 60],
-        ['2019-8-14 8:00:02', 30],
-        ['2019-8-14 8:00:03', 79],
-        ['2019-8-14 8:00:06', 10],
-        ['2019-8-14 8:00:20', 31]
-      ]
+      currentActive: 1,
+      data: []
     }
   },
-
-  mounted() {
-    // setTimeout(() => {
-    //   this.initCategory();
-    // }, 3000);
-  },
   methods: {
+    init(data) {
+      this.dataForm = data
+      this.currentActive = 1
+      this.getDataListTb()
+    },
+    getDataListTb() {
+      this.$http({
+        url: this.$http.adornUrl('/analysis/getEnergyTb'),
+        method: 'get',
+        params: this.$http.adornParams({
+          resourceId: this.dataForm.id,
+          type: this.currentActive
+        })
+      }).then((data) => {
+        if (data && data.code === 0) {
+          // console.log('数据', data)
+          this.data = data.list
+        }
+      })
+    },
     cancelhandlePic() {
       this.$emit('cancelhandlePic')
     },
     // 当日 ，本周
     handleDate(i) {
       this.currentActive = i
+      this.getDataListTb()
     }
-    // initCategory() {
-    //   let gId = document.getElementById('categoryId')
-
-    //   this.category = this.$echarts.init(gId)
-    //   const option = {
-    //     xAxis: {
-    //       type: 'category',
-    //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    //     },
-    //     yAxis: {
-    //       type: 'value'
-    //     },
-    //     series: [
-    //       {
-    //         data: [150, 230, 224, 218, 135, 147, 260],
-    //         type: 'line'
-    //       }
-    //     ]
-    //   }
-    //   this.category.setOption(option)
-    // }
   }
 }
 </script>

src/pages/kb/power/config.js

 export const tableColums = [
   {
     align: 'center',
-    prop: 'A',
+    prop: 'name',
     label: '设备名称',
     width: 162
   },

src/pages/kb/power/page.vue

@@ -50,10 +50,12 @@
           :isShowOp="true"
         >
           <template #operation="data">
-            <el-button type="text" @click="openHistoryHandle(data)"
+            <el-button type="text" @click="openHistoryHandle(data.scope.row)"
               >历史数据</el-button
             >
-            <el-button type="text" @click="openPicTHandle">统计图表</el-button>
+            <el-button type="text" @click="openPicTHandle(data.scope.row)"
+              >统计图表</el-button
+            >
           </template>
         </enTable>
         <tablePagination
@@ -65,10 +67,12 @@
     </cardList>
     <history-data-modal
       :historyDataModalVisible="historyDataModalVisible"
+      ref="historyDataModal"
       v-on:cancelhandle="cancelhandle"
     ></history-data-modal>
     <statistic-pic-table-modal
       :statisticModalVisible="statisticModalVisible"
+      ref="statisticPicTableModal"
       v-on:cancelhandlePic="cancelhandlePic"
     ></statistic-pic-table-modal>
   </div>
@@ -97,14 +101,14 @@ export default {
       pageSize: 10,
       totalSize: 0,
       formData: {},
-      activeTab: '01',
+      activeTab: '1',
       historyDataModalVisible: false,
       statisticModalVisible: false,
       tableColums,
       tableData: [],
       electroTabList: [
         {
-          value: '01',
+          value: '1',
           label: '全部'
         },
         {
@@ -150,6 +154,25 @@ export default {
     // 获取数据
     getDataList(page, size) {
       console.log('类型id', this.activeTab)
+      this.$http({
+        url: this.$http.adornUrl('/liResource/list'),
+        method: 'post',
+        data: {
+          type: this.activeTab, //资源点类型
+          page: page || this.pageIndex,
+          size: size || this.pageSize
+        }
+      }).then((data) => {
+        if (data && data.code === 0) {
+          console.log('数据', data)
+          this.tableData = data.page.rows
+          this.tableColums = tableColums
+          this.totalSize = data.page.total
+        } else {
+          this.tableData = []
+          this.totalSize = 0
+        }
+      })
     },
     cancelhandle() {
       this.$nextTick(() => {
@@ -162,12 +185,17 @@ export default {
       })
     },
 
-    openHistoryHandle() {
+    openHistoryHandle(data) {
+      console.log('用电：', data)
       this.historyDataModalVisible = true
-    },
-    openPicTHandle() {
       this.$nextTick(() => {
+        this.$refs.historyDataModal.init(data)
+      })
+    },
+    openPicTHandle(data) {
       this.statisticModalVisible = true
+      this.$nextTick(() => {
+        this.$refs.statisticPicTableModal.init(data)
       })
     },
     toEnergyPage() {