<template>
  <div class="app-container">
    <el-card style="margin-bottom: 10px" class="box-card">
      <el-row :gutter="20">
        <!--右侧用户数据-->
        <el-col :span="24" :xs="24">
          <!--头部搜索条件输入框  -->
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
          >
<!--            <el-form-item label="用电类型" prop="type">-->
<!--              <el-select-->
<!--                v-model="queryParams.unit"-->
<!--                placeholder="请选择类型对应关系"-->
<!--                clearable-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="dict in dictone"-->
<!--                  :key="dict.value"-->
<!--                  :label="dict.label"-->
<!--                  :value="dict.value"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <div @click="selemonitid">-->
<!--                <el-input disabled v-model="unitIdname" />-->
<!--              </div>-->
<!--            </el-form-item>-->
            <el-form-item label="统计时间段" prop="status" label-width="auto">
              <el-select
                v-model="queryParams.type"
                placeholder="请选择"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dict1"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="采集时间">
              <el-date-picker
                v-model="queryParams.startTime"
                style="width: 240px"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <div>-</div>
            </el-form-item>
            <el-form-item
              ><el-date-picker
                v-model="queryParams.endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 240px"
                type="datetime"
                placeholder="选择日期时间"
              ></el-date-picker
            ></el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="20">
      <!--左侧部门数据-->
      <el-col :span="5" :xs="24">
        <el-card style="height: 350px; position: relative" class="box-card">
<!--          <img-->
<!--            style="-->
<!--              position: absolute;-->
<!--              top: 40%;-->
<!--              left: 50%;-->
<!--              transform: translate(-50%, -100%);-->
<!--            "-->
<!--            src="../../../assets/images/electricityIcon.svg"-->
<!--          />-->
          <div
            style="
              white-space: nowrap;
              position: absolute;
              top: 45%;
              left: 50%;
              transform: translate(-50%, 0%);
              font-size: 2vw;
              font-weight: 600;
            "
          >
            合计电量
          </div>
          <div
            style="
              word-break: break-all;
              position: absolute;
              width: 100%;
              text-align: center;
              padding: 3px 10px;
              top: 55%;
              left: 50%;
              transform: translate(-50%, 0%);
              font-size: 2vw;
              font-weight: 600;
            "
          >
            {{ hejidata != null ? hejidata.toFixed(2) : "" }}kW·h
          </div>
        </el-card>
      </el-col>
      <!--右侧用户数据-->
      <el-col :span="19" :xs="24">
        <el-card style="height: 350px; margin-bottom: 10px" class="box-card">
          <div
            style="
              width: 100%;
              height: 350px;
              margin-left: 50px;
              user-select: none;
              margin-top: -30px;
            "
            id="card"
          ></div>
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-bottom: 30px" class="box-card">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                >导出</el-button
              >
            </el-col>
            <right-toolbar
              :showSearch.sync="showSearch"
              @queryTable="getList"
              :columns="columns"
            ></right-toolbar>
          </el-row>
          <!-- 用户表格 -->
          <el-table
            header-cell-class-name="columnclassname"
            id="bootstrap-table"
            v-loading="loading"
            :data="userList"
            @selection-change="handleSelectionChange"
          >
            <template v-for="time in timeList">
              <template v-if="time.field == 'type'">
                <el-table-column
                  v-if="time.title && time.rowspan == 2"
                  :key="time.title"
                  :label="time.title"
                >
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.statistical_unit"
                      :value="scope.row.type"
                    />
                  </template>
                </el-table-column>
              </template>
              <template v-else>
                <el-table-column
                  min-width="120"
                  v-if="time.title && time.rowspan == 2"
                  :key="time.title"
                  :label="time.title"
                  :prop="time.field"
                />
              </template>

              <el-table-column
                v-if="time.title && time.colspan == 1"
                :key="time.title"
                :label="time.title"
              >
                <el-table-column
                  min-width="140"
                  :key="time.title + '_' + time.field"
                  label="电耗量(kW·h)"
                  :prop="time.field"
                >
                </el-table-column>
              </el-table-column>
            </template>
          </el-table>

          <!-- 分页 -->
          <!-- <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          /> -->
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      :title="title2"
      :visible.sync="opentwo"
      @close="canceltwo"
      width="400px"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-col>
          <div class="head-container">
            <el-input
              v-model="deptName"
              placeholder="请输入计量设备名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container">
            <el-tree
              :data="deptOptionsselect"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClicktwo"
            />
          </div>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormtwo">确 定</el-button>
        <el-button @click="canceltwo">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listUser,
  treeDat,
  treeDattwo,
  treeDatthree,
  dnbCountingData,
  deptTreeSelect,
} from "@/api/ems/base/ElectricityPreview";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import * as echarts from "echarts";
import moment from "moment";
import {
  getHoursBetween,
  getDatesBetween,
  getMonthsBetween,
  getYearsBetween,
} from "@/utils/dateReportUtils.js";
import { handleExport } from "@/utils/export.js";
import { availableParallelism } from "os";
let data = {};
let optionData = {};
export default {
  name: "TypeRelationq",
  dicts: ["statistical_unit"],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      timeList: null,
      energyList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      dateRangeone: "",
      dateRangetwo: "",
      formaaa: {},
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "lable",
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
      },
      opentwo: false,
      title2: "",
      // 查询参数
      queryParams: {
        pageNum: NaN,
        isAsc: "asc",
        monitorId: "",
        isAmmeter: "",
        unit: "",
        unitId: "",
        type: "hour",
        startTime: "",
        endTime: "",
      },
      hejidata: 0,

      // 列信息
      columns: [
        { key: 0, label: `计量设备编号`, visible: true },
        { key: 1, label: `计量设备名称`, visible: true },
        { key: 2, label: `采集时间`, visible: true },
        { key: 3, label: `A项电压(V)`, visible: true },
        { key: 4, label: `B项电压(V)`, visible: true },
        { key: 5, label: `C项电压(V)`, visible: true },
        { key: 6, label: `A项电流(A)`, visible: true },
        { key: 7, label: `B项电流(A)`, visible: true },
        { key: 8, label: `C项电流(A)`, visible: true },
        { key: 9, label: `功率因数`, visible: true },
        { key: 10, label: `仪表值(kW·h)`, visible: true },
        { key: 11, label: `采集方式`, visible: true },
      ],
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "用户密码长度必须介于 5 和 20 之间",
            trigger: "blur",
          },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
      deptOptionsselect: [],
      //采集方式
      dict1: [
        { label: "时", value: "hour" },
        { label: "日", value: "day" },
        { label: "月", value: "month" },
        { label: "年", value: "year" },
      ],
      dictone: [
        { label: "建筑", value: 0 },
        { label: "业态", value: 1 },
        { label: "分页", value: 2 },
      ],
      unitIdname: "",
      //柱状图
      //     option : {
      //     xAxis: {
      //     type: 'category',
      //     data: ['1','2']
      //     },
      //     yAxis: {
      //     type: 'value',
      //     axisLine:{show:true},
      //   },
      //   series: [
      //     {
      //       data: [1,5],
      //       type: 'bar'
      //     }
      //   ],
      //   dataZoom : [
      //           {
      //             type: 'slider',
      //             show: true,
      //             start: 0,
      //             end: 30,
      //             xAxisIndex: [0],
      //           },
      //         ],
      // },

      option: {
        grid: {
          containLabel: true,
          left: "2%",
          right: "2%",
          bottom: "5%",
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return params.data + "kW·h";
          },
          textStyle: {
            align: "left",
          },
        },
        xAxis: [
          {
            axisLabel: {
              color: "#333",
              fontSize: 14,
              // interval: 0,
            },
            axisTick: {
              lineStyle: {
                color: "#384267",
              },
              show: true,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
                width: 1,
              },
              show: true,
            },
            data: data.x,
            type: "category",
          },
        ],
        yAxis: {
          axisLabel: {
            color: "#333",
            fontSize: 14,
          },
          axisTick: {
            lineStyle: {
              color: "#384267",
              width: 1,
            },
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
              width: 1,
            },
            show: true,
          },
          name: "",
        },
        dataZoom: [],
        series: [
          {
            data: data.y,
            type: "bar",
            barMaxWidth: 20,
            barWidth: "75%",
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: optionData?.bgColor ? optionData.bgColor : "#0a8ff6",
                  },
                  {
                    offset: 1,
                    color: "#06f8f7",
                  },
                ],
              },
            },
          },
          {
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#3aa1ff",
                color: "#3aa1ff",
                lineStyle: {
                  color: "#3aa1ff",
                  width: 1,
                },
              },
            },
            tooltip: {
              show: false,
            },
            data: data.y,
          },
        ],
      },
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.queryParams.startTime = new Date(new Date().setHours(0, 0, 0, 0));
    var d = new Date(this.queryParams.startTime);
    let m = ("0" + (d.getMonth() + 1)).slice(-2);
    let tian = ("0" + d.getDate()).slice(-2);
    let h = ("0" + d.getHours()).slice(-2);
    let M = ("0" + d.getMinutes()).slice(-2);
    let s = ("0" + d.getSeconds()).slice(-2);

    console.log("d", d);
    this.queryParams.startTime =
      d.getFullYear() + "-" + m + "-" + tian + " " + h + ":" + M + ":" + s;
    this.queryParams.endTime = new Date(
      new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
    );
    var d1 = new Date(this.queryParams.endTime);
    let m1 = ("0" + (d1.getMonth() + 1)).slice(-2);
    let tian1 = ("0" + d1.getDate()).slice(-2);
    let h1 = ("0" + d1.getHours()).slice(-2);
    let M1 = ("0" + d1.getMinutes()).slice(-2);
    let s1 = ("0" + d1.getSeconds()).slice(-2);
    console.log("tian1.length", tian1);
    this.queryParams.endTime =
      d1.getFullYear() +
      "-" +
      m1 +
      "-" +
      tian1 +
      " " +
      h1 +
      ":" +
      M1 +
      ":" +
      s1;
    //this.dateRangetwo = d1.getFullYear()+ '-'+m1+ '-'+tian1+ ' '+ h1+ ':'+M1+':'+s1;
  },
  mounted() {
    this.handleQuery();
  },
  methods: {
    canceltwo() {
      this.opentwo = false;
      this.resettwo();
    },
    resettwo() {
      this.formadd = {
        monitorIds: [],
      };
    },
    getDateList(startTime, endTime) {
      if (this.queryParams.type === "hour") {
        return getHoursBetween(startTime, endTime);
      } else if (this.queryParams.type === "day") {
        return getDatesBetween(startTime, endTime);
      } else if (this.queryParams.type === "month") {
        return getMonthsBetween(startTime, endTime);
      } else if (this.queryParams.type === "year") {
        return getYearsBetween(startTime, endTime);
      }
    },
    selechart1() {
      var chartDom = document.getElementById("card");
      var myChart = echarts.init(chartDom);
      let data = [];
      let option = {
        grid: {
          containLabel: true,
          left: "2%",
          right: "2%",
          bottom: "5%",
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return (
              params[0].name +
              "<br>" +
              params[0].marker +
              " " +
              params[0].data +
              "kW·h"
            );
          },
        },
        xAxis: [
          {
            axisLabel: {
              color: "#333",
              fontSize: 14,
              // interval: 0,
            },
            axisTick: {
              lineStyle: {
                color: "#384267",
              },
              show: true,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
                width: 1,
              },
              show: true,
            },
            data: [],
            type: "category",
          },
        ],
        yAxis: {
          axisLabel: {
            color: "#333",
            fontSize: 14,
          },
          axisTick: {
            lineStyle: {
              color: "#384267",
              width: 1,
            },
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
              width: 1,
            },
            show: true,
          },
          name: "",
        },
        dataZoom: [],
        series: [
          {
            data: data,
            type: "bar",
            barMaxWidth: 20,
            barWidth: "75%",
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: optionData?.bgColor ? optionData.bgColor : "#0a8ff6",
                  },
                  {
                    offset: 1,
                    color: "#06f8f7",
                  },
                ],
              },
            },
          },
          {
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#3aa1ff",
                color: "#3aa1ff",
                lineStyle: {
                  color: "#3aa1ff",
                  width: 1,
                },
              },
            },
            tooltip: {
              show: false,
            },
            data: data,
          },
        ],
      };
      myChart.setOption(option);
      listUser(this.queryParams).then((response) => {
        this.userList = response.rows;
        this.hejidata = 0;
        this.userList.map((item, index) => {
          if (item.expendSum != undefined) {
            this.hejidata += parseFloat(item.expendSum);
          }
        });
        // console.log('expendSum',this.hejidata)
        this.total = response.total;
        this.loading = false;
        //echart 数据处理
        let xData = Object.keys(response.rows?.[0]);
        let xData1 = xData.filter(
          (val) =>
            !!val && !["unitName", "state", "expendSum", "type"].includes(val)
        );
        let yData = [];
        xData1.forEach((val) => {
          let num = 0;
          response.rows.forEach((res) => {
            num += parseFloat(res[val] || 0);
          });
          yData.push(parseFloat(num.toFixed(2)) || 0);
        });
        let xData2 = xData1.map((val) => val.split("expend")[1] + ":00:00");
        let arr = xData2.map((e, index) => {
          return {
            name: e,
            value: yData[index],
            time: new Date(e).getTime(),
          };
        });
        arr.sort((a, b) => {
          return a.time - b.time;
        });
        let yData1 = arr.map((e) => e.value);
        console.log("///", yData1);
        myChart.setOption({
          dataZoom: [
            {
              show: true,
              type: "slider",
              bottom: "3%",
              xAxisIndex: 0,
              height: 12,
              start: 0,
              brushSelect: false,
              end: (1 / (yData1.length / 20)) * 100,
              textStyle: {
                fontSize: 0,
                color: "rgba(0,0,0,0)",
              },
            },
          ],
          xAxis: [
            {
              data: arr.map((e) => e.name.split(":")[0]),
            },
          ],
          series: [
            {
              data: yData1,
            },
            {
              data: yData1,
            },
          ],
        });
        //表格数据处理
      });
    },
    // 二次弹窗节点单击事件
    handleNodeClicktwo(data) {
      console.log("data", data);
      this.formaaa.monitorName = data.name;
      this.formaaa.monitorId = data.id;

      // this.handleQuery();
    },
    //二次弹窗 取消按钮
    canceltwo() {
      this.formaaa.monitorName = "";
      this.formaaa.monitorId = "";
      this.opentwo = false;
      //this.reset();
    },
    //二次弹窗确认按钮
    submitFormtwo: function () {
      this.opentwo = false;
      this.unitIdname = this.formaaa.monitorName;
      this.queryParams.unitId = this.formaaa.monitorId;
      //this.canceltwo();
    },
    /** 查询用户列表 */
    getList(dateList) {
      this.loading = true;
      this.initTable(dateList);
      this.selechart1();
    },
    initTable(columns) {
      this.timeList = [];
      this.energyList = [];
      this.timeList.push(
        {
          title: "用电类型",
          field: "type",
          align: "center",
          rowspan: 2,
        },
        {
          title: "用电类型名称",
          field: "unitName",
          align: "center",
          rowspan: 2,
        },
        {
          field: "expendSum",
          title: "电耗量合计(kW·h)",
          align: "center",
          rowspan: 2,
        }
      );
      for (let i in columns) {
        this.timeList.push({
          title: columns[i],
          align: "center",
          colspan: 1,
          field: "expend" + columns[i].substring(0, 13),
        });
        this.energyList.push({
          field: "expend" + columns[i].substring(0, 13),
          title: "电耗量(kW·h)",
          align: "center",
          rowspan: 1,
        });
      }
    },
    //数组转树形结构
    tranListToTreeData(list) {
      // 最终要产出的树状数据的数组
      const treeList = [];
      // 所有项都使用对象存储起来
      const map = {};

      // 建立一个映射关系：通过id快速找到对应的元素
      list.forEach((item) => {
        if (!item.children) {
          item.children = [];
        }
        map[item.id] = item;
      });

      list.forEach((item) => {
        // 对于每一个元素来说，先找它的上级
        //    如果能找到，说明它有上级，则要把它添加到上级的children中去
        //    如果找不到，说明它没有上级，直接添加到 treeList
        const parent = map[item.pId];
        // 如果存在则表示item不是最顶层的数据
        if (parent) {
          parent.children.push(item);
        } else {
          // 如果不存在 则是顶层数据
          treeList.push(item);
        }
      });
      // 返回出去
      return treeList;
    },
    selemonitid() {
      this.deptOptionsselect = [];
      if (this.queryParams.unit == 0) {
        treeDat().then((response) => {
          response.map((item, index) => {
            item, (item.oid = item.id), (item.lable = item.name);
          });
          this.deptOptionsselect = this.tranListToTreeData(response);
        });
      } else if (this.queryParams.unit == 1) {
        treeDattwo().then((response) => {
          response.map((item, index) => {
            item, (item.oid = item.id), (item.lable = item.name);
          });
          this.deptOptionsselect = this.tranListToTreeData(response);
        });
      } else if (this.queryParams.unit == 2) {
        treeDatthree().then((response) => {
          response.map((item, index) => {
            item, (item.oid = item.id), (item.lable = item.name);
          });
          this.deptOptionsselect = this.tranListToTreeData(response);
        });
      }

      this.opentwo = true;
      this.title2 = "统计信息管理选择";
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.lable.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.monitorSubset = data.monitorId;
      this.getList();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: [],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let dateList = this.getDateList(
        this.queryParams.startTime,
        this.queryParams.endTime
      );
      this.getList(dateList);
    },
    /** 重置按钮操作 */
    resetQuery() {
      //this.dateRange = [];
      this.unitIdname = "";
      this.queryParams.unit = "";
      this.queryParams.startTime = "";
      this.queryParams.endTime = "";
      //this.resetForm("queryForm");
      //this.queryParams.deptId = undefined;
      //this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleResetPwd":
          this.handleResetPwd(row);
          break;
        case "handleAuthRole":
          this.handleAuthRole(row);
          break;
        default:
          break;
      }
    },

    /** 导出按钮操作 */
    handleExport() {
      handleExport("bootstrap-table", "用电预览", true);
      // let paramsexport = JSON.parse(JSON.stringify(this.queryParams));
      // delete paramsexport.pageSize;
      // delete paramsexport.pageNum;
      // this.download(
      //   "/energy/record/dnbInstant/export",
      //   {
      //     ...paramsexport,
      //   },
      //   `user_${new Date().getTime()}.xlsx`
      // );
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  ::v-deep.columnclassname {
    font-size: 10px;
    font-weight: normal;
  }
  .tree {
    width: 220px;

    ::v-deep .el-tree-node {
      white-space: normal; //关键代码!!!!!!!!!

      .el-tree-node__content {
        height: 100%;
        align-items: start;
      }
    }
  }

  // ::v-deep .el-card__body{
  //   padding: 0px 0px 0px 0px
  // }
}
</style>
