admin-fiveFollowing/src/views/dataManage/energyReport/index.vue

<template>
  <div class="energyReport">
    <div class="energContent1">
      <div style="display: flex">
        <el-select
          v-model="store.state.siteId"
          @change="siteChange"
          placeholder="选择站点"
        >
          <el-option
            v-for="item in store.state.siteList"
            :key="item.id"
            :label="item.siteName"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>

      <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
          ref="tree"
          :data="deviceBoxData"
          show-checkbox
          node-key="id"
           @node-click="handleNodeClick"
          accordion
          :check-strictly="true"
          :props="defaultProps"
          @check="currentChecked"
          highlight-current="showTree"
        />
      </div>
    </div>
    <div class="energContent2">
      <div class="energDivOne">
        <div class="energHaeder">
          <el-radio-group
            v-model="listTabPosition"
            @change="listTabsChange(listTabPosition)"
            style="display: flex"
          >
            <el-radio-button label="dayValue">日报表</el-radio-button>
            <el-radio-button label="monthValue">月报表</el-radio-button>
            <el-radio-button label="yearValue">年报表</el-radio-button>
          </el-radio-group>
          <div class="energDivTwo">
            <div class="block">
              <!-- <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>
            <el-button
              icon="el-icon-search"
              type="primary"
              style="padding: 7px 12px"
              @click="searchData()"
            >
              查询
            </el-button>
          </div>
        </div>

        <div style="width: 30%">
          <div style="display: flex; float: right; margin-right: 15px">
            <el-checkbox
              v-model="checked"
              label="显示抄表"
              style="margin-right: 20px"
            ></el-checkbox>
            <el-radio-group
              v-model="rightTabs"
              @change="listTabsChange(rightTabs)"
              style="display: flex"
            >
              <el-radio-button label="tables">表格</el-radio-button>
              <el-radio-button label="echarts">图表</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="energEcharts">
        <echarts :echartsData="echartsData" v-if="rightTabsBool&&flag" :Height="Height"></echarts>
        <tables v-if="!rightTabsBool" :Height="Height"></tables>
      </div>
    </div>
  </div>
</template>
<script>
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'

export default defineComponent({
  name: 'energyReport',
  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' ||
        value == 'monthValue' ||
        value == 'yearValue'
      ) {
        value == 'dayValue'
          ? (typeSrarch.value = 1)
          : value == 'monthValue'
          ? (typeSrarch.value = 2)
          : (typeSrarch.value = 3)
      } else if (value == 'electriQuan' || value == 'electriFees') {
        console.log()
      } else if (value == 'tables' || value == 'echarts') {
        value == 'echarts'
          ? (rightTabsBool.value = true)
          : (rightTabsBool.value = false)
      }

      console.log(dateType)
    }

    const state = reactive({
      value1: '2021-10-16',
    })

    const Height = ref(0)
    Height.value = window.innerHeight - 210 + 'px'
    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),
      dateType, //tabs切换时间选择器类型
      listTabPosition: ref('dayValue'), //日月年报表tabs v-model
      electricTabs: ref('electriQuan'), //电量电费tabs v-model
      rightTabs: ref('echarts'), //表格图表tabs v-model
      rightTabsBool, //表格图表 显示隐藏
      siteValue: ref(''), //站点下拉列表v-model
      checked: ref(false),
      siteChange,
      searchData,
      dateTime,
      deviceBoxList,
      showTree,
      data: [
        {
          id: 1,
          deviceName: '克隆监控设备',
          deviceCode: 'KL15223565',
          children: [],
        },
        {
          id: 2,
          deviceName: '测试监控设备two',
          deviceCode: 'DA00013294',
          children: [],
        },
      ],

      defaultProps: {
        children: 'children',
        label: 'deviceName',
        deviceCode: 'deviceCode',
        id: 'id',
      },
      store,
      listTabsChange,
      flag,
      // currentChecked,
      typeSrarch,
      deviceBoxData,
      deviceChecked,
      echartsData,
      handleNodeClick
    }
  },
})
</script>

<style lang="scss" scoped>
.energyReport {
  display: flex;
  height: calc(100vh - 130px);
  // padding: 30px;
  // margin-top: 50px;
  .energContent1 {
    background-color: #fff;
    width: 15%;
    height: 100%;
    margin-right: 25px;
    padding: 20px;
    min-width: 200px;
    .energSwitch {
      margin-top: 20px;
      width: 100%;
      height: 20px;
      cursor: pointer;
      .energSwitchOne {
        display: flex;
        border: 0.5px solid silver;
        padding: 8px;
        font-size: 13px;
        div:nth-child(1) {
          width: 100%;
        }
      }
      .energSwitchOne:hover {
        background-color: #409eff;
      }
      .energSwitchOne:focus {
        background-color: #409eff;
      }
    }
  }
  .energContent2 {
    background-color: #fff;
    width: 85%;
    min-width: 845px;
    height: 100%;
    .energDivOne {
      display: flex;
      margin: 15px 0px 15px 15px;
      .energHaeder {
        width: 70%;
        display: flex;
        .energDivTwo {
          font-weight: 600;
          color: #9d9d9d;
          // width: 195px;
          margin: 0 20px;
          .block {
            white-space: nowrap;
          }
        }
      }
    }
  }
}

// tab重置样式
.tabsSizeColor > .el-tabs__header .el-tabs__item {
  line-height: 50px;
  height: 50px;
  font-size: 16px;
}

.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 2px solid #409eff;
  color: #409eff;
}
.el-tabs__header {
  margin-bottom: 0;
}
.el-tabs--card > .el-tabs__header .el-tabs__item,
.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>