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

<template>
  <div class="chainAnalysis">
    <div class="chainContent1">
      <div style="display: flex">
        <el-select v-model="store.state.siteId" 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="chainSwitch">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :props="defaultProps"
        />
      </div>
    </div>
    <div class="chainContent2">
      <div class="chainDivOne">
        <div class="chainDivTwo">
          <div class="block">
            <span class="demonstration">选择时间范围：</span>
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="➥"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            ></el-date-picker>
          </div>
        </div>
        <el-radio-group
          v-model="listTabPosition"
          @change="listTabsChange(listTabPosition)"
          style="display: flex"
        >
          <el-radio-button label="allValue">所有值</el-radio-button>
          <el-radio-button label="dailyValue">每日值</el-radio-button>
          <el-radio-button label="monthValue">每月值</el-radio-button>

          <div style="margin-left: 10px">
            <el-button
              icon="el-icon-search"
              type="primary"
              style="padding: 7px 12px"
            >
              查询
            </el-button>
          </div>
        </el-radio-group>
      </div>
      <div class="chainEcharts">
        <echarts v-for="op in options" :key="op"></echarts>
      </div>
    </div>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { defineComponent, ref, reactive, toRefs } from 'vue'
import echarts from './ehcarts/index.vue'

export default defineComponent({
  name: 'chainAnalysis',
  components: { echarts },
  props: {},
  setup() {
    const store = useStore()
    const listTabsChange = (value) => {
      console.log(value)
    }

    const state = reactive({
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
    })

    return {
      store,
      ...toRefs(state),
      listTabPosition: ref('allValue'),
      data: [
        {
          id: 1,
          label: '设备1',
          children: [
            {
              id: 4,
              label: '母线停电次数',
            },
            {
              id: 4,
              label: '功率因数',
            },
            {
              id: 4,
              label: 'A相功率因数',
            },
          ],
        },
      ],
      value: ref(''),
      options: ref([
        {
          value: 'Option1',
          label: 'Option1',
        },
        {
          value: 'Option2',
          label: 'Option2',
        },
        {
          value: 'Option3',
          label: 'Option3',
        },
        {
          value: 'Option4',
          label: 'Option4',
        },
        {
          value: 'Option5',
          label: 'Option5',
        },
      ]),
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      listTabsChange,
    }
  },
})
</script>

<style lang="scss" scoped>
.chainAnalysis {
  display: flex;
  height: calc(100vh - 130px);
  // padding: 30px;
  // margin-top: 50px;
  .chainContent1 {
    background-color: #fff;
    width: 15%;
    height: 100%;
    margin-right: 25px;
    padding: 20px;
    min-width: 200px;
    .chainSwitch {
      margin-top: 20px;
      width: 100%;
      height: 20px;
      cursor: pointer;
      .chainSwitchOne {
        display: flex;
        border: 0.5px solid silver;
        padding: 8px;
        font-size: 13px;
        div:nth-child(1) {
          width: 100%;
        }
      }
      .chainSwitchOne:hover {
        background-color: #409eff;
      }
      .chainSwitchOne:focus {
        background-color: #409eff;
      }
    }
  }
  .chainContent2 {
    background-color: #fff;
    width: 85%;
    min-width: 845px;
    height: 100%;
    .chainEcharts {
      height: calc(100vh - 192px);
      overflow-y: auto;
    }
    .chainDivOne {
      display: flex;
      margin: 15px 0px 15px 15px;
      .chainDivTwo {
        font-weight: 600;
        color: #9d9d9d;
        margin-right: 20px;
      }
    }
  }
}
.chainEcharts::-webkit-scrollbar {
  display: none;
}
</style>