数据管理duijie

src/api/dataManage/chainAnalysis.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+
+
+//环比分析
+export function ringRatioList(params) {
+    return request({
+        url: '/htAnalogData/ringRatioList',
+        method: 'POST',
+        data: params,
+    })
+}

src/api/dataManage/demandAnalysis.js

@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+
+
+
+//需量分析
+export function demandAnalysis(params) {
+    return request({
+        url: '/htAnalogData/demandAnalysis',
+        method: 'GET',
+        params,
+    })
+}
+
+
+//需量分析设备请求
+export function deviceBoxList(params) {
+    return request({
+        url: '/device/deviceBoxList',
+        method: 'GET',
+        params,
+    })
+}

src/api/dataManage/energyReport.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 
 
-//同比分析
+//用能月报分析
 export function monthlyReport2(params) {
     return request({
         url: '/htAnalogData/monthlyReport',

src/utils/index.js

@@ -45,6 +45,41 @@ export function parseTime(time, cFormat) {
     })
 }
 
+export function parseTime2(time, cFormat) {
+    if (arguments.length === 0) {
+        return null
+    }
+    const format = cFormat || '{y}-{m}-{d}'
+    let date
+    if (typeof time === 'object') {
+        date = time
+    } else {
+        if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
+            time = parseInt(time)
+        }
+        if (typeof time === 'number' && time.toString().length === 10) {
+            time = time * 1000
+        }
+        date = new Date(time)
+    }
+    const formatObj = {
+        y: date.getFullYear(),
+        m: date.getMonth() + 1,
+        d: date.getDate(),
+
+    }
+    return format.replace(/{([ymdhisa])+}/g, (result, key) => {
+        let value = formatObj[key]
+        if (key === 'a') {
+            return ['日', '一', '二', '三', '四', '五', '六'][value]
+        }
+        if (result.length > 0 && value < 10) {
+            value = '0' + value
+        }
+        return value || 0
+    })
+}
+
 /**
  * @author chuzhixin 1204505056@qq.com
  * @description 格式化时间

src/views/dataManage/chainAnalysis/index.vue

@@ -2,7 +2,7 @@
   <div class="chainAnalysis">
     <div class="chainContent1">
       <div style="display: flex">
-        <el-select v-model="store.state.siteId" placeholder="选择站点">
+        <el-select v-model="store.state.siteId" placeholder="选择站点"  @change="siteChange">
           <el-option
             v-for="item in store.state.siteList"
             :key="item.id"
@@ -13,13 +13,25 @@
       </div>
 
       <div class="chainSwitch">
-        <el-tree
+        <!-- <el-tree
           :data="data"
           show-checkbox
           node-key="id"
           :default-expanded-keys="[2, 3]"
           :props="defaultProps"
+        /> -->
+
+         <el-tree
+          ref="tree"
+          :data="store.state.deviceList"
+          show-checkbox
+          node-key="id"
+          accordion
+          :check-strictly="true"
+          :props="defaultProps"
+          @check="currentChecked"
         />
+        
       </div>
     </div>
     <div class="chainContent2">
@@ -28,7 +40,7 @@
           <div class="block">
             <span class="demonstration">选择时间范围：</span>
             <el-date-picker
-              v-model="value1"
+              v-model="dateTime"
               type="datetimerange"
               range-separator="➥"
               start-placeholder="开始时间"
@@ -44,20 +56,34 @@
           <el-radio-button label="allValue">所有值</el-radio-button>
           <el-radio-button label="dailyValue">每日值</el-radio-button>
           <el-radio-button label="monthValue">每月值</el-radio-button>
+           <el-select
+            v-model="valueCalculation"
+            placeholder="Select"
+            style="width: 100px; margin-left: 10px"
+            v-if="typeSrarch"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
 
           <div style="margin-left: 10px">
             <el-button
               icon="el-icon-search"
               type="primary"
               style="padding: 7px 12px"
+               @click="searchData()"
             >
               查询
             </el-button>
           </div>
         </el-radio-group>
       </div>
-      <div class="chainEcharts">
-        <echarts v-for="op in options" :key="op"></echarts>
+      <div class="chainEcharts" v-if="flag">
+        <echarts v-for="op in 3" :key="op"></echarts>
       </div>
     </div>
   </div>
@@ -67,6 +93,10 @@ import { useStore } from 'vuex'
 import { defineComponent, ref, reactive, toRefs } from 'vue'
 import echarts from './ehcarts/index.vue'
 
+import { ElNotification } from 'element-plus'
+import * as api from '@/api/dataManage/chainAnalysis.js'
+import { ElMessage } from 'element-plus'
+
 export default defineComponent({
   name: 'chainAnalysis',
   components: { echarts },
@@ -75,11 +105,88 @@ export default defineComponent({
     const store = useStore()
     const listTabsChange = (value) => {
       console.log(value)
+      if (value == 'allValue') {
+        typeSrarch.value = 0
+      } else if (value == 'dailyValue') {
+        typeSrarch.value = 1
+        valueCalculation.value = 1
+      } else {
+        typeSrarch.value = 2
+        valueCalculation.value = 1
+      }
     }
+    const flag = ref(false)
+     const typeSrarch = ref(0)
+     const treeCheckedList = ref([])
+      const valueCalculation = ref()
+      const dateTime = ref('')
+    const ecahrtsData = ref({})
     const state = reactive({
       value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
     })
 
+    //通过站点切换下拉框 change事件改变 tree树中的数据
+    const siteChange = () => {
+      store.commit('publicDeviceList')
+    }
+    const currentChecked = (nodeObj, SelectedObj) => {
+      nodeObj, SelectedObj
+      treeCheckedList.value = SelectedObj.checkedNodes
+      treeCheckedList.value = []
+      SelectedObj.checkedNodes.forEach((item) => {
+        treeCheckedList.value.push(item.deviceCode)
+        remove(treeCheckedList.value, item.deviceCode)
+      })
+    }
+
+    function remove(arr, item) {
+      let newArr = arr.filter((ele) => {
+        return ele !== item
+      })
+      return newArr
+    }
+
+    function searchData() {
+      if(!dateTime.value){
+        ElNotification({
+          title: '提示',
+          message: '请选择开始和结束时间',
+          type: 'warning',
+        })
+        return
+      }
+     
+      if (treeCheckedList.value.length > 0) {
+ 
+        store.commit('TimeAll_function', dateTime.value)
+        const time = store.state.Time_Data
+        api
+          .ringRatioList({
+            startTime: time[0],
+            endTime: time[1],
+            type: typeSrarch.value,
+            valueCalculation: typeSrarch.value ? valueCalculation.value : 0,
+            displayField: treeCheckedList.value,
+          })
+          .then((requset) => {
+            if (requset.status === 'SUCCESS') {
+              flag.value = true
+              ecahrtsData.value = requset.data[0]
+            } else {
+              ElMessage.error(requset.msg)
+            }
+          })
+      } else {
+        console.log('', 1)
+        ElNotification({
+          title: '提示',
+          message: '请选择测点',
+          type: 'warning',
+        })
+      }
+    }
+
+
     return {
       store,
       ...toRefs(state),
@@ -107,31 +214,35 @@ export default defineComponent({
       value: ref(''),
       options: ref([
         {
-          value: 'Option1',
-          label: 'Option1',
+          value: 1,
+          label: '平均值',
         },
         {
-          value: 'Option2',
-          label: 'Option2',
+          value: 2,
+          label: '最大值',
         },
         {
-          value: 'Option3',
-          label: 'Option3',
+          value: 3,
+          label: '最小值',
         },
         {
-          value: 'Option4',
-          label: 'Option4',
-        },
-        {
-          value: 'Option5',
-          label: 'Option5',
+          value: 4,
+          label: '累计值',
         },
       ]),
       defaultProps: {
-        children: 'children',
-        label: 'label',
+         children: 'children',
+        label: 'deviceName',
+        deviceCode: 'deviceCode',
+        id: 'id',
       },
+      dateTime,ecahrtsData,valueCalculation,
+      typeSrarch,
+      flag,
       listTabsChange,
+      siteChange,
+      currentChecked,
+      searchData
     }
   },
 })
@@ -195,4 +306,17 @@ export default defineComponent({
 .chainEcharts::-webkit-scrollbar {
   display: none;
 }
+</style>
+<style lang="less">
+.chainSwitch {
+  .el-tree-node__content .el-checkbox__input {
+    display: none;
+  }
+  .el-tree-node
+    .el-tree-node__children
+    .el-tree-node__content
+    .el-checkbox__input {
+    display: block;
+  }
+}
 </style>

src/views/dataManage/demandAnalysis/index.vue

@@ -2,27 +2,32 @@
   <div class="demandAnalysis">
     <div class="demContent1">
       <div style="display: flex">
-        <el-select
-          v-model="siteValue"
+       <el-select
+          v-model="store.state.siteId"
+          @change="siteChange"
           placeholder="选择站点"
-          @change="siteOption()"
         >
           <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in store.state.siteList"
+            :key="item.id"
+            :label="item.siteName"
+            :value="item.id"
           ></el-option>
         </el-select>
       </div>
 
       <div class="demSwitch">
         <el-tree
-          :data="data"
+          ref="tree"
+          :data="deviceBoxData"
           show-checkbox
           node-key="id"
-          :default-expanded-keys="[2, 3]"
+           @node-click="handleNodeClick"
+          accordion
+          :check-strictly="true"
           :props="defaultProps"
+          @check="currentChecked"
+          highlight-current="showTree"
         />
       </div>
     </div>
@@ -32,24 +37,25 @@
           <div class="block">
             <span class="demonstration" style="color: black">日期:</span>
             <el-date-picker
-              v-model="value1"
-              type="month"
+              v-model="dateTime"
+              type="day"
               placeholder="请选择日期"
             ></el-date-picker>
           </div>
         </div>
+
         <el-radio-group
-          v-model="listTabPosition"
-          @change="listTabsChange(listTabPosition)"
-          style="display: flex"
-        >
-          <el-radio label="1" style="line-height: 2.5">电费计算周期</el-radio>
-          <el-radio label="2" style="line-height: 2.5">自然月</el-radio>
+            v-model="listTabPosition"
+            @change="listTabsChange(listTabPosition)"
+            style="display: flex"
+          >
+            <el-radio-button label="cycleValue">电费结算周期</el-radio-button>
+            <el-radio-button label="monthValue">自然月</el-radio-button>
+          </el-radio-group>
 
-          <div style="margin-left: 10px">
-            <el-button icon="el-icon-search" type="primary">查询</el-button>
+         <div style="margin-left: 10px">
+            <el-button icon="el-icon-search" type="primary"  @click="searchData()">查询</el-button>
           </div>
-        </el-radio-group>
       </div>
       <div class="demEcharTable">
         <div class="Echarts">
@@ -106,8 +112,13 @@
 </template>
 <script>
 import { useStore } from 'vuex'
-import { defineComponent, ref, reactive, toRefs } from 'vue'
+import { defineComponent, ref, reactive, toRefs,onMounted } from 'vue'
 import echarts from './ehcarts/index.vue'
+import { parseTime2 } from '@/utils'
+
+import * as api from '@/api/dataManage/demandAnalysis.js'
+import { ElMessage } from 'element-plus'
+import { ElNotification } from 'element-plus'
 
 export default defineComponent({
   name: 'demandAnalysis',
@@ -116,13 +127,29 @@ export default defineComponent({
   setup() {
     const store = useStore()
 
+    const deviceBoxData = ref([])
+    const deviceChecked = ref([])
+     const dateTime = ref(new Date())
+    const typeSrarch = ref(1)
+    const flag = ref(false)
+    const echartsData = ref({})
+
     const siteOption = () => {
       console.log(store.state)
     }
 
     const listTabsChange = (value) => {
+       value == 'monthValue'
+          ? (typeSrarch.value = 2)
+        
+          : (typeSrarch.value = 1)
       console.log(value)
     }
+    const handleNodeClick = (data, obj, node) => {
+      data, node
+      console.log(obj.data.deviceCode)
+      deviceChecked.value = obj.data.deviceCode
+    }
 
     const state = reactive({
       value1: '2021-5',
@@ -133,6 +160,67 @@ export default defineComponent({
     window.onresize = function () {
       Height.value = window.innerHeight - 250 + 'px'
     }
+    //通过站点切换下拉框 change事件改变 tree树中的数据
+    const siteChange = () => {
+      store.commit('publicDeviceList')
+      deviceBoxList()
+    }
+    function deviceBoxList() {
+      api
+        .deviceBoxList({
+          siteId: store.state.siteId,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            deviceBoxData.value = requset.data
+            deviceBoxData.value.forEach(function (i, index) {
+              i.id = index
+              i.children = []
+            })
+            console.log(deviceBoxData.value)
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+     function searchData() {
+      if (deviceChecked.value.length>0) {
+        // alert(1)
+        // store.commit('TimeAll_function', dateTime.value)
+        // const time = store.state.Time_Data
+
+         dateTime.value
+        ? (dateTime.value = parseTime2(
+            dateTime.value
+          ))
+        : ''
+        api
+          .demandAnalysis({
+            cycle: typeSrarch.value,
+            monthDate:dateTime.value,
+            deviceCode:deviceChecked.value
+
+          })
+          .then((requset) => {
+            if (requset.status === 'SUCCESS') {
+              flag.value = true
+               echartsData.value = requset.data[0]
+            } else {
+              ElMessage.error(requset.msg)
+            }
+          })
+      } else {
+        console.log('', 1)
+        ElNotification({
+          title: '提示',
+          message: '请选择设备',
+          type: 'warning',
+        })
+      }
+    }
+    onMounted(() => {
+      deviceBoxList()
+    })
 
     return {
       Height,
@@ -140,7 +228,14 @@ export default defineComponent({
       siteValue: ref(1), //select站点选择
       listTabsChange, //单选change事件
       siteOption, //站点下拉change事件
-      listTabPosition: ref('1'), //单选按钮
+      siteChange,
+      searchData,
+      handleNodeClick,
+      store,
+       listTabPosition: ref('cycleValue'), //单选按钮
+      deviceBoxData,
+      deviceChecked,
+      dateTime,typeSrarch,flag,echartsData,
       data: [
         {
           id: 1,
@@ -180,8 +275,10 @@ export default defineComponent({
         },
       ]),
       defaultProps: {
-        children: 'children',
-        label: 'label',
+       children: 'children',
+        label: 'deviceName',
+        deviceCode: 'deviceCode',
+        id: 'id',
       },
       tableData: [
         {
@@ -417,4 +514,17 @@ export default defineComponent({
 .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar{
   overflow-y: hidden;
 }
+</style>
+<style lang="less">
+.demSwitch {
+  .el-tree-node__content .el-checkbox__input {
+    display: none;
+  }
+  .el-tree-node
+    .el-tree-node__children
+    .el-tree-node__content
+    .el-checkbox__input {
+    display: block;
+  }
+}
 </style>

src/views/dataManage/energyReport/ehcarts/index.vue

@@ -26,29 +26,29 @@ export default defineComponent({
     // 读取数据 func
     const loading = ref(true)
 
-    const data = ref([
-      {
-        name: '进线',
-        list: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        listDate: props.echartsData.listDate,
-      },
-    ])
+    // const data = ref([
+    //   {
+    //     name: '进线',
+    //     list: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    //     listDate: props.echartsData.listDate,
+    //   },
+    // ])
 
-    const dataAll = ref([
-      {
-        name: '进线(kWh)',
-        type: 'line',
-        smooth: false,
-        data: props.echartsData.list,
-        symbolSize: 6,
-        markPoint: {
-          data: [
-            { type: 'max', name: 'Max' },
-            { type: 'min', name: 'Min' },
-          ],
-        },
-      },
-    ])
+    // const dataAll = ref([
+    //   {
+    //     name: '进线(kWh)',
+    //     type: 'line',
+    //     smooth: false,
+    //     data: props.echartsData.list,
+    //     symbolSize: 6,
+    //     markPoint: {
+    //       data: [
+    //         { type: 'max', name: 'Max' },
+    //         { type: 'min', name: 'Min' },
+    //       ],
+    //     },
+    //   },
+    // ])
 
     const getData = async () => {
       console.log('子组件中的props.ecahrtsData')
@@ -101,7 +101,7 @@ export default defineComponent({
         xAxis: {
           type: 'category',
           boundaryGap: true,
-          data: data.value[0].listDate.map((val) => {
+          data: props.echartsData.listDate.map((val) => {
             return val.split(':')[0] 
           }),
           axisTick: {
@@ -141,7 +141,21 @@ export default defineComponent({
             },
           },
         },
-        series: dataAll.value,
+        series: [
+      {
+        name: '电量(kWh)',
+        type: 'line',
+        smooth: false,
+        data: props.echartsData.list,
+        symbolSize: 6,
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' },
+          ],
+        },
+      },
+    ],
       })
       window.onresize = function () {
         // 自适应大小
@@ -166,7 +180,7 @@ export default defineComponent({
       (newVal, oldVal, clear) => {
         // 执行异步任务，并得到关闭异步任务的 id
 
-        alert(1)
+        // alert(1)
         console.log(newVal)
         let id = writeValue(newVal, oldVal)
         // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务

src/views/dataManage/energyReport/index.vue

@@ -16,8 +16,7 @@
         </el-select>
       </div>
 
-      <div class="energSwitch" >
-    
+      <div class="energSwitch">
         <!-- <el-select v-model="deviceChecked" v-if="deviceBoxData.length>0">
           <el-option
             v-for="item in deviceBoxData"
@@ -31,7 +30,7 @@
           :data="deviceBoxData"
           show-checkbox
           node-key="id"
-           @node-click="handleNodeClick"
+          @node-click="handleNodeClick"
           accordion
           :check-strictly="true"
           :props="defaultProps"
@@ -85,11 +84,11 @@
 
         <div style="width: 30%">
           <div style="display: flex; float: right; margin-right: 15px">
-            <el-checkbox
+            <!-- <el-checkbox
               v-model="checked"
               label="显示抄表"
               style="margin-right: 20px"
-            ></el-checkbox>
+            ></el-checkbox> -->
             <el-radio-group
               v-model="rightTabs"
               @change="listTabsChange(rightTabs)"
@@ -102,8 +101,16 @@
         </div>
       </div>
       <div class="energEcharts">
-        <echarts :echartsData="echartsData" v-if="rightTabsBool&&flag" :Height="Height"></echarts>
-        <tables v-if="!rightTabsBool" :Height="Height"></tables>
+        <echarts
+          v-if="rightTabsBool && flag"
+          :echartsData="echartsData"
+          :Height="Height"
+        ></echarts>
+        <tables
+          v-if="!rightTabsBool"
+          :tableDatas="echartsData"
+          :Height="Height"
+        ></tables>
       </div>
     </div>
   </div>
@@ -125,24 +132,24 @@ export default defineComponent({
   props: {},
   setup() {
     const store = useStore()
-     const showTree = ref(true)
+    const showTree = ref(true)
+
+    const dateTime = ref([new Date(2021, 10, 1), new Date(2021, 10, 30)])
     const typeSrarch = ref(1)
-    // const treeCheckedList = ref([])
+    const flag = ref(false)
+    const echartsData = ref({})
 
     let dateType = ref('date')
-     const echartsData = ref({})
+    
+
     const deviceBoxData = ref([])
     const deviceChecked = ref([])
     let rightTabsBool = ref(true)
-    const flag = ref(false)
 
-    const dateTime = ref([new Date(2021, 10, 1), new Date(2021, 10, 30)])
     const handleNodeClick = (data, obj, node) => {
       data, node
       console.log(obj.data.deviceCode)
-      deviceChecked.value=obj.data.deviceCode
-     
-
+      deviceChecked.value = obj.data.deviceCode
     }
     const listTabsChange = (value) => {
       if (
@@ -198,7 +205,7 @@ export default defineComponent({
     // }
 
     function searchData() {
-      if (deviceChecked.value) {
+      if (deviceChecked.value.length > 0) {
         store.commit('TimeAll_function', dateTime.value)
         const time = store.state.Time_Data
         api
@@ -206,13 +213,12 @@ export default defineComponent({
             cycle: typeSrarch.value,
             startTime: time[0],
             endTime: time[1],
-            deviceCode:deviceChecked.value
-
+            deviceCode: deviceChecked.value,
           })
           .then((requset) => {
             if (requset.status === 'SUCCESS') {
               flag.value = true
-               echartsData.value = requset.data[0]
+              echartsData.value = requset.data[0]
             } else {
               ElMessage.error(requset.msg)
             }
@@ -293,7 +299,7 @@ export default defineComponent({
       deviceBoxData,
       deviceChecked,
       echartsData,
-      handleNodeClick
+      handleNodeClick,
     }
   },
 })

src/views/dataManage/energyReport/tables/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <div style="margin: 0 15px">
-      <el-table
+      <!-- <el-table
         :data="tableData"
         border
         stripe
         :header-cell-style="headClass"
         :height="Height"
       >
-        <el-table-column type="index" label="序号" width="50"></el-table-column>
+        <el-table-column type="index" label="名称" width="50"></el-table-column>
         <el-table-column
           prop="numCode"
           label="变量编码"
@@ -19,33 +19,50 @@
           label="基准值"
           width=""
         ></el-table-column>
-        <el-table-column fixed="right" label="操作" width="100">
-          <template #default="scope">
-            <el-button
-              type="text"
-              size="small"
-              style="color: #409eff"
-              @click.prevent="Update(scope.row)"
-            >
-              编辑
-            </el-button>
-          </template>
-        </el-table-column>
+        <el-table-column
+          prop="refValue"
+          label="合计"
+          width=""
+        ></el-table-column>
+        <el-table-column
+          prop="refValue"
+          label="单位"
+          width=""
+        ></el-table-column>
+      </el-table> -->
+
+      <el-table :data="tableData6" border style="max-width: 100%">
+          <el-table-column
+          props="name"
+          label="名称"
+          width=""
+        ></el-table-column>
+        <template v-for="(item, index) in cols" :key="index">
+          
+          <el-table-column :prop="item.prop" :label="item.label" align="center">
+            <template #default="scope">
+              <span>
+                {{ scope.row[item.prop] }}
+              </span>
+            </template>
+          </el-table-column>
+        </template>
       </el-table>
     </div>
   </div>
 </template>
 <script>
 // import { useStore } from "vuex";
-import { defineComponent } from 'vue'
+import { defineComponent, watch, ref,onMounted } from 'vue'
 
 export default defineComponent({
   name: 'consumConfig',
   components: {},
   props: {
     Height: String,
+    tableDatas: Object,
   },
-  setup() {
+  setup(props) {
     const Update = (row) => {
       console.log('', row)
     }
@@ -54,41 +71,79 @@ export default defineComponent({
     const headClass = () => {
       return 'background:#FAFAFA !important;color: black;'
     }
+    const getData = async () => {
+      console.log('子组件中的props.tableDatas')
+      console.log(props.tableDatas.listDate)
+
+      var aa = props.tableDatas.listDate
+      var newArr=[]
+      aa.forEach((item, index) => {
+        newArr.push({'label':item,'prop':index})
+      })
+      
+      
+      // newArr.unshift({'label':'单位','prop':'unit'});
+      // newArr.unshift({'label':'合计','prop':'total'});
+      // newArr.unshift({'label':'名称','prop':'name'});
+      console.log(newArr)
+      cols.value=newArr
+
+      var bb=props.tableDatas.list;
+      var obj={}
+      bb.forEach((item,index)=>{
+        obj[index]=item
+      })
+      obj.name='进线'
+
+      console.log(obj)
+tableData6.value[0]=obj
+      
+
+    
+    }
+    const cols = ref([
+      { label: '名称', prop: 'name' },
+      { label: '合计', prop: 'total' },
+      { label: '单位', prop: 'unit' },
+      { label: '2020-22-20', prop: 1 },
+    ])
+    const tableData6 = ref([
+      {0: 559.2, 1: 616.8, 2: 583.99, 3: 546.39, 4: 498.8, 5: 574.41, 6: 780.4, 7: 794.39, 8: 767.59}
+    ])
+
+    const writeValue = (val) => {
+      val
+      getData()
+    }
+
+    //监听变化
+    watch(
+      () => props.tableDatas,
+      (newVal, oldVal, clear) => {
+        // 执行异步任务，并得到关闭异步任务的 id
+
+        alert(1)
+        console.log(newVal)
+        let id = writeValue(newVal, oldVal)
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(id))
+      },
+      { lazy: true }
+    )
+     onMounted(() => {
+      getData()
+  
+    })
+
 
     return {
       headClass,
       Update, //修改偏差配置事件
+      cols,
+      tableData6,
       tableData: [
         {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
+          numCode: '电量',
           refValue: 'Tom',
         },
       ],