用能月报

src/api/dataManage/energyReport.js

@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+
+
+
+//同比分析
+export function monthlyReport2(params) {
+    return request({
+        url: '/htAnalogData/monthlyReport',
+        method: 'GET',
+        params,
+    })
+}
+
+
+//用能月报设备请求
+export function deviceBoxList(params) {
+    return request({
+        url: '/device/deviceBoxList',
+        method: 'GET',
+        params,
+    })
+}

src/views/dataManage/chainAnalysis/index.vue

@@ -76,7 +76,6 @@ export default defineComponent({
     const listTabsChange = (value) => {
       console.log(value)
     }
-
     const state = reactive({
       value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
     })

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

@@ -1,61 +1,21 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div
-      :style="'height:' + Height"
-      id="sumeChartRef"
-      ref="sumeChartRef"
-    />
+    <div :style="'height:' + Height" id="sumeChartRef" ref="sumeChartRef" />
   </div>
 </template>
 <script>
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import * as echarts from 'echarts'
 // import { ChartDataType } from "../../data";
 
-const data = [
-  {
-    name: '进线',
-    list: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    listDate: [
-      '00:00:00',
-      '02:00:00',
-      '04:00:00',
-      '06:00:00',
-      '08:00:00',
-      '10:00:00',
-      '12:00:00',
-      '14:00:00',
-      '16:00:00',
-      '18:00:00',
-      '20:00:00',
-      '22:00:00',
-    ],
-  },
-]
-
-const dataAll = [
-  {
-    name: '进线(kWh)',
-    type: 'line',
-    smooth: false,
-    data: [0, 0.1, 0, 0, 0, 0, 0, 0, 0, 0.7, 0, 0],
-    symbolSize: 6,
-    markPoint: {
-      data: [
-        { type: 'max', name: 'Max' },
-        { type: 'min', name: 'Min' },
-      ],
-    },
-  },
-]
-
 export default defineComponent({
   name: 'CurveCom',
   props: {
     Height: String,
+    echartsData: Object,
   },
-  setup() {
+  setup(props) {
     const store = useStore()
 
     // 总数
@@ -65,15 +25,43 @@ 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 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')
+      console.log(props.echartsData)
+
       // loading.value = true
       // await store.dispatch('Home/queryWorksChartData')
       loading.value = false
     }
 
-    onMounted(() => {
-      getData()
+    function echarts2() {
       let myChart = echarts.init(document.getElementById('sumeChartRef'))
+
       // 绘制图表
       myChart.setOption({
         color: ['#FEB70D', '#50F335', '#0DC8FE'],
@@ -113,8 +101,8 @@ export default defineComponent({
         xAxis: {
           type: 'category',
           boundaryGap: true,
-          data: data[0].listDate.map((val) => {
-            return val.split(':')[0] + ':' + val.split(':')[1]
+          data: data.value[0].listDate.map((val) => {
+            return val.split(':')[0] 
           }),
           axisTick: {
             show: false, //去除刻度线
@@ -153,18 +141,45 @@ export default defineComponent({
             },
           },
         },
-        series: dataAll,
+        series: dataAll.value,
       })
       window.onresize = function () {
         // 自适应大小
         myChart.resize()
       }
+    }
+
+    onMounted(() => {
+      getData()
+      echarts2()
     })
 
+    const writeValue = (val) => {
+      val
+      echarts2()
+      getData()
+    }
+
+    //监听变化
+    watch(
+      () => props.echartsData,
+      (newVal, oldVal, clear) => {
+        // 执行异步任务，并得到关闭异步任务的 id
+
+        alert(1)
+        console.log(newVal)
+        let id = writeValue(newVal, oldVal)
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(id))
+      },
+      { lazy: true }
+    )
+
     return {
       loading,
       total,
       num,
+      echarts,
     }
   },
 })

src/views/dataManage/energyReport/index.vue

@@ -2,23 +2,41 @@
   <div class="energyReport">
     <div class="energContent1">
       <div style="display: flex">
-        <el-select v-model="siteValue" placeholder="选择站点">
+        <el-select
+          v-model="store.state.siteId"
+          @change="siteChange"
+          placeholder="选择站点"
+        >
           <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="energSwitch">
+      <div class="energSwitch" >
+    
+        <!-- <el-select v-model="deviceChecked" v-if="deviceBoxData.length>0">
+          <el-option
+            v-for="item in deviceBoxData"
+            :key="item.value"
+            :label="item.deviceName"
+            :value="item.deviceCode"
+          ></el-option>
+        </el-select> -->
         <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>
@@ -36,31 +54,33 @@
           </el-radio-group>
           <div class="energDivTwo">
             <div class="block">
-              <span>日期：</span>
+              <!-- <span>日期：</span>
               <el-date-picker
                 style="width: 150px"
                 v-model="value1"
                 :type="dateType"
+              ></el-date-picker> -->
+              <span class="demonstration">选择时间范围：</span>
+              <el-date-picker
+                v-model="dateTime"
+                type="daterange"
+                range-separator="➥"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
               ></el-date-picker>
             </div>
           </div>
-          <div style="margin: 0 15px">
+
+          <div>
             <el-button
               icon="el-icon-search"
               type="primary"
               style="padding: 7px 12px"
+              @click="searchData()"
             >
               查询
             </el-button>
           </div>
-          <el-radio-group
-            v-model="electricTabs"
-            @change="listTabsChange(electricTabs)"
-            style="display: flex"
-          >
-            <el-radio-button label="electriQuan">电量</el-radio-button>
-            <el-radio-button label="electriFees">电费</el-radio-button>
-          </el-radio-group>
         </div>
 
         <div style="width: 30%">
@@ -82,14 +102,20 @@
         </div>
       </div>
       <div class="energEcharts">
-        <echarts v-if="rightTabsBool" :Height="Height"></echarts>
+        <echarts :echartsData="echartsData" v-if="rightTabsBool&&flag" :Height="Height"></echarts>
         <tables v-if="!rightTabsBool" :Height="Height"></tables>
       </div>
     </div>
   </div>
 </template>
 <script>
-import { defineComponent, ref, reactive, toRefs } from 'vue'
+import { useStore } from 'vuex'
+import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue'
+
+import * as api from '@/api/dataManage/energyReport.js'
+import { ElMessage } from 'element-plus'
+import { ElNotification } from 'element-plus'
+
 import echarts from './ehcarts/index.vue'
 import tables from './tables/index.vue'
 
@@ -98,9 +124,26 @@ export default defineComponent({
   components: { echarts, tables },
   props: {},
   setup() {
+    const store = useStore()
+     const showTree = ref(true)
+    const typeSrarch = ref(1)
+    // const treeCheckedList = 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
+     
 
+    }
     const listTabsChange = (value) => {
       if (
         value == 'dayValue' ||
@@ -108,10 +151,10 @@ export default defineComponent({
         value == 'yearValue'
       ) {
         value == 'dayValue'
-          ? (dateType.value = 'date')
+          ? (typeSrarch.value = 1)
           : value == 'monthValue'
-          ? (dateType.value = 'month')
-          : (dateType.value = 'year')
+          ? (typeSrarch.value = 2)
+          : (typeSrarch.value = 3)
       } else if (value == 'electriQuan' || value == 'electriFees') {
         console.log()
       } else if (value == 'tables' || value == 'echarts') {
@@ -132,6 +175,80 @@ export default defineComponent({
     window.addEventListener('resize', () => {
       Height.value = window.innerHeight - 210 + 'px'
     })
+
+    //通过站点切换下拉框 change事件改变 tree树中的数据
+    const siteChange = () => {
+      store.commit('publicDeviceList')
+      deviceBoxList()
+    }
+    // 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 (deviceChecked.value) {
+        store.commit('TimeAll_function', dateTime.value)
+        const time = store.state.Time_Data
+        api
+          .monthlyReport2({
+            cycle: typeSrarch.value,
+            startTime: time[0],
+            endTime: time[1],
+            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',
+        })
+      }
+    }
+
+    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)
+          }
+        })
+    }
+    onMounted(() => {
+      deviceBoxList()
+    })
+
     return {
       Height,
       ...toRefs(state),
@@ -142,54 +259,41 @@ export default defineComponent({
       rightTabsBool, //表格图表 显示隐藏
       siteValue: ref(''), //站点下拉列表v-model
       checked: ref(false),
+      siteChange,
+      searchData,
+      dateTime,
+      deviceBoxList,
+      showTree,
       data: [
         {
           id: 1,
-          label: '设备1',
-          children: [
-            {
-              id: 4,
-              label: '母线停电次数',
-            },
-            {
-              id: 4,
-              label: '功率因数',
-            },
-            {
-              id: 4,
-              label: 'A相功率因数',
-            },
-          ],
+          deviceName: '克隆监控设备',
+          deviceCode: 'KL15223565',
+          children: [],
         },
-      ],
-      options: ref([
         {
-          value: 'Option1',
-          label: 'Option1',
+          id: 2,
+          deviceName: '测试监控设备two',
+          deviceCode: 'DA00013294',
+          children: [],
         },
-        {
-          value: 'Option2',
-          label: 'Option2',
-        },
-        {
-          value: 'Option3',
-          label: 'Option3',
-        },
-        {
-          value: 'Option4',
-          label: 'Option4',
-        },
-        {
-          value: 'Option5',
-          label: 'Option5',
-        },
-      ]),
+      ],
+
       defaultProps: {
         children: 'children',
-        label: 'label',
+        label: 'deviceName',
+        deviceCode: 'deviceCode',
+        id: 'id',
       },
-
+      store,
       listTabsChange,
+      flag,
+      // currentChecked,
+      typeSrarch,
+      deviceBoxData,
+      deviceChecked,
+      echartsData,
+      handleNodeClick
     }
   },
 })
@@ -244,8 +348,8 @@ export default defineComponent({
         .energDivTwo {
           font-weight: 600;
           color: #9d9d9d;
-          width: 195px;
-          margin-left: 20px;
+          // width: 195px;
+          margin: 0 20px;
           .block {
             white-space: nowrap;
           }
@@ -273,4 +377,18 @@ export default defineComponent({
 .el-tabs--card > .el-tabs__header .el-tabs__nav {
   border: none;
 }
+</style>
+
+<style lang="less">
+.energSwitch {
+  .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/sameAnalysis/ehcarts/index.vue

@@ -4,32 +4,11 @@
   </div>
 </template>
 <script>
-import { computed, defineComponent, onMounted, ref ,watch} from 'vue'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import * as echarts from 'echarts'
 // import { ChartDataType } from "../../data";
 
-const data = [
-  {
-    name: 'IA',
-    list: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    listDate: [
-      '00:00:00',
-      '02:00:00',
-      '04:00:00',
-      '06:00:00',
-      '08:00:00',
-      '10:00:00',
-      '12:00:00',
-      '14:00:00',
-      '16:00:00',
-      '18:00:00',
-      '20:00:00',
-      '22:00:00',
-    ],
-  },
-]
-
 const dataAll = [
   {
     name: 'IA(A)',
@@ -44,76 +23,97 @@ const dataAll = [
       ],
     },
   },
+  {
+    name: 'IB(A)',
+    type: 'line',
+    smooth: false,
+    data: [0, 0, 0.2, 0, 0, 0, 0, 0.8, 0, 0, 0, 0],
+    symbolSize: 6,
+    markPoint: {
+      data: [
+        { type: 'max', name: 'Max' },
+        { type: 'min', name: 'Min' },
+      ],
+    },
+  },
+  {
+    name: 'IC(A)',
+    type: 'line',
+    smooth: false,
+    data: [0, 0.1, 0, 0, 0, 0.9, 0, 0, 0, 0, 0, 0],
+    symbolSize: 6,
+    markPoint: {
+      data: [
+        { type: 'max', name: 'Max' },
+        { type: 'min', name: 'Min' },
+      ],
+    },
+  },
 ]
 
 const yName = 'kV'
 
 export default defineComponent({
   name: 'CurveCom',
-   props: {
+  props: {
     ecahrtsData: Object,
-    title:String
+    title: String,
   },
 
-
   setup(props) {
     props
     const store = useStore()
     const sumeChartRef = ref(null)
 
+    const listData = ref([])
+
     // 总数
     const total = computed(() => store.state.Home.worksChartData.total)
     // num
     const num = computed(() => store.state.Home.worksChartData.num)
-    const newDataName=ref('')
+    const newDataName = ref('')
 
     // 读取数据 func
     const loading = ref(true)
     const getData = async () => {
-      console.log(props.ecahrtsData)
-      console.log(props.title)
-
       // loading.value = true
       // await store.dispatch('Home/queryWorksChartData')
       loading.value = false
-    }
-
-    //监听变化
-    watch(
-      () => props.ecahrtsData,
-      (newVal) => {
-        alert(1)
-        console.log('newVal')     
-      console.log(newVal)     
-      newDataName.value=newVal.name
-      console.log( newDataName.value)
-      }
-    )
+      console.log('props.ecahrtsData')
+      console.log(props.ecahrtsData.list)
 
-    // 定义 watch 监听
-    // watch(
-    //   props.ecahrtsData,
-    //   (newCount) => {
-    //     alert(1)
-    //     console.log(newCount)
-     
-    //   },
-    //   // watch 刚被创建的时候不执行
-    //   { lazy: true }
-    // )
+      listData.value = props.ecahrtsData.list.map((x) => {
+        return x.dataTime
+      }) // 生成数组
+      // var newArrValue=[]
+      props.ecahrtsData.list.map((obj) => {
+        var valueArr = []
+        var nameArr = []
+        for (var i in obj) {
+          if (i != 'dataTime') {
+            nameArr.push(i)
+            valueArr.push(obj[i])
+          }
+         
+        }
+         console.log(obj)
+        console.log('obj')
+        // console.log('nameArr')
+        // console.log(nameArr)
+        // console.log('valueArr')
+        // console.log(valueArr)
 
-
-
-
-
-    onMounted(() => {
-      getData()
+        // newArrValue.push(valueArr)
+      })
+      //  console.log('newArrValue')
+      // console.log(newArrValue)
+    }
+    function ecahrts() {
       let myChart = echarts.init(sumeChartRef.value)
-      // 绘制图表
       myChart.setOption({
-        color: ['#FEB70D'],
+        color: ['#FEB70D', '#50F335', '#0DC8FE'],
         title: {
-          text: newDataName.value,
+          text: '同比分析',
           left: 'center',
           textStyle: {
             color: '#9d9d9d',
@@ -145,9 +145,7 @@ export default defineComponent({
         xAxis: {
           type: 'category',
           boundaryGap: true,
-          data: data[0].listDate.map((val) => {
-            return val.split(':')[0] + ':' + val.split(':')[1]
-          }),
+          data: listData.value,
           axisTick: {
             show: false, //去除刻度线
           },
@@ -191,6 +189,31 @@ export default defineComponent({
         // 自适应大小
         myChart.resize()
       }
+    }
+
+    const writeValue = (val) => {
+      val
+      ecahrts()
+      getData()
+    }
+
+    //监听变化
+    watch(
+      () => props.ecahrtsData,
+      (newVal, oldVal, clear) => {
+        alert(1)
+        // 执行异步任务，并得到关闭异步任务的 id
+        console.log(newVal)
+        let id = writeValue(newVal, oldVal)
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(id))
+      },
+      { lazy: true }
+    )
+
+    onMounted(() => {
+      getData()
+      ecahrts()
     })
 
     const Height = ref(0)
@@ -204,7 +227,7 @@ export default defineComponent({
       loading,
       total,
       num,
-      newDataName
+      newDataName,
     }
   },
 })

src/views/dataManage/sameAnalysis/index.vue

@@ -79,7 +79,7 @@
         </el-radio-group>
       </div>
       <div class="sameEcharts">
-        <echarts :ecahrtsData="ecahrtsData" :title="123"></echarts>
+        <echarts :ecahrtsData="ecahrtsData" :title="123" v-if="flag"></echarts>
       </div>
     </div>
   </div>
@@ -88,8 +88,8 @@
 import { useStore } from 'vuex'
 import { defineComponent, ref, onMounted } from 'vue'
 import echarts from './ehcarts/index.vue'
-import { ElNotification } from 'element-plus'
 
+import { ElNotification } from 'element-plus'
 import * as api from '@/api/dataManage/sameAnalysis.js'
 import { ElMessage } from 'element-plus'
 
@@ -104,10 +104,11 @@ export default defineComponent({
     const treeData = ref([])
     const tree = ref(null)
     const typeSrarch = ref(0)
+    const flag = ref(false)
 
     const valueCalculation = ref()
     const dateTime = ref('')
-    const ecahrtsData=ref({})
+    const ecahrtsData = ref({})
 
     const listTabsChange = (value) => {
       console.log(value)
@@ -125,11 +126,11 @@ export default defineComponent({
     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)
-        })
+      treeCheckedList.value = []
+      SelectedObj.checkedNodes.forEach((item) => {
+        treeCheckedList.value.push(item.deviceCode)
+        remove(treeCheckedList.value, item.deviceCode)
+      })
     }
 
     function remove(arr, item) {
@@ -140,14 +141,13 @@ export default defineComponent({
     }
 
     function searchData() {
-      ecahrtsData.value={};
+      ecahrtsData.value = {}
       if (treeCheckedList.value.length > 0) {
         console.log('', store.state.deviceList)
         console.log('treeCheckedList')
         console.log(treeCheckedList.value)
         store.commit('TimeAll_function', dateTime.value)
-        const time = store.state.Time_Data;
-
+        const time = store.state.Time_Data
         api
           .yearOnYearList({
             startTime: time[0],
@@ -158,11 +158,8 @@ export default defineComponent({
           })
           .then((requset) => {
             if (requset.status === 'SUCCESS') {
-               
-              ecahrtsData.value=requset.data[0]
-              console.log(requset.data)
-              console.log('父组件中ecahrtsData.value')
-              console.log(ecahrtsData.value)
+              flag.value = true
+              ecahrtsData.value = requset.data[0]
             } else {
               ElMessage.error(requset.msg)
             }
@@ -182,7 +179,9 @@ export default defineComponent({
       store.commit('publicDeviceList')
     }
 
-    onMounted(() => {})
+    onMounted(() => {
+      // searchData()
+    })
 
     return {
       store,
@@ -195,6 +194,7 @@ export default defineComponent({
         deviceCode: 'deviceCode',
         id: 'id',
       },
+      flag,
       remove,
       dateTime,
       searchData,
@@ -202,7 +202,6 @@ export default defineComponent({
       siteChange,
       listTabsChange,
       typeSrarch,
-
       options: ref([
         {
           value: 1,
@@ -223,7 +222,6 @@ export default defineComponent({
       ]),
       valueCalculation,
       ecahrtsData,
-   
     }
   },
 })