HwJyHbMes/hw-ui/src/views/ems/base/Energystatistics/index.vue

<template>
  <div class="app-container">
    <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="采集时间">
            <el-date-picker
              v-model="dateRangeone"
              style="width: 240px"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item><div>-</div></el-form-item>
          <el-form-item
            ><el-date-picker
              v-model="dateRangetwo"
              value-format="yyyy-MM-dd"
              style="width: 240px"
              type="date"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
<!--          <el-form-item label="表具类型" prop="publicShareType">-->
<!--            <el-select-->
<!--              v-model="queryParams.publicShareType"-->
<!--              placeholder="请选择表具类型"-->
<!--              clearable-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="dict in dict.type.public_share_type"-->
<!--                :key="dict.value"-->
<!--                :label="dict.label"-->
<!--                :value="dict.value"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="表具层级" prop="monitorHierarchy">-->
<!--            <el-select-->
<!--              v-model="queryParams.monitorHierarchy"-->
<!--              placeholder="请选择表具层级"-->
<!--              clearable-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="dict in dict.type.monitor_hierarchy"-->
<!--                :key="dict.value"-->
<!--                :label="dict.label"-->
<!--                :value="parseInt(dict.value)"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </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-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport1"
              >筛选计量设备</el-button
            >
          </el-col>
<!--          <el-col :span="1.5">-->
<!--            <el-button-->
<!--              type="warning"-->
<!--              plain-->
<!--              icon="el-icon-download"-->
<!--              size="mini"-->
<!--              @click="handleExport"-->
<!--              >导出</el-button-->
<!--            >-->
<!--          </el-col>-->
          <div class="total">
            <div class="number">合计电量:</div>
            <div class="alltotal">
              {{ number }}
              kW·h
            </div>
          </div>
<!--          <right-toolbar-->
<!--            :showSearch.sync="showSearch"-->
<!--            @queryTable="getList"-->
<!--            :columns="columns"-->
<!--          ></right-toolbar>-->
        </el-row>
        <!-- 用户表格 -->
        <el-table
          id="bootstrap-table"
          v-loading="loading"
          :data="userList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column
            label="父级计量设备编号"
            align="center"
            key="parentMonitorId"
            prop="parentMonitorId"
            v-if="columns[7].visible"
          />
          <el-table-column
            label="父级计量设备名称"
            align="center"
            key="parentName"
            prop="parentName"
            v-if="columns[8].visible"
          />
          <el-table-column
            label="计量设备编号"
            align="center"
            key="monitorId"
            prop="monitorId"
            v-if="columns[0].visible"
          />
          <el-table-column
            label="计量设备名称"
            align="center"
            key="monitorName"
            prop="monitorName"
            v-if="columns[1].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="安装位置"
            align="center"
            key="address"
            prop="address"
            v-if="columns[2].visible"
          />
<!--          <el-table-column-->
<!--            label="表具层级"-->
<!--            align="center"-->
<!--            key="monitorHierarchy"-->
<!--            prop="monitorHierarchy"-->
<!--            v-if="columns[3].visible"-->
<!--          >-->
<!--            <template slot-scope="scope">-->
<!--              <dict-tag-->
<!--                :options="dict.type.monitor_hierarchy"-->
<!--                :value="scope.row.monitorHierarchy"-->
<!--              />-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column
            label="所属用户"
            align="center"
            key="owningUser"
            prop="owningUser"
            v-if="columns[3].visible"
          />
          <el-table-column
            label="用电量(kW·h)"
            align="center"
            key="expend"
            prop="expend"
            v-if="columns[4].visible"
          />
          <el-table-column
            label="仪表值(kW·h)"
            align="center"
            key="meterValue"
            prop="meterValue"
            v-if="columns[5].visible"
          />
          <el-table-column
            label="时间范围"
            align="center"
            key="timeRange"
            prop="timeRange"
            v-if="columns[6].visible"
          />
          <el-table-column
            label="是否虚拟表"
            align="center"
            key="is_ammeter"
            prop="is_ammeter"
            v-if="columns[9].visible"
          />
        </el-table>

        <!-- 分页 -->
        <!-- <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        /> -->
      </el-col>
    </el-row>
    <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"
              show-checkbox
              default-expand-all
              highlight-current
              @check-change="handleCheckChange"
            />
          </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,
  previewPolyline,
  deptTreeSelect,
} from "@/api/ems/base/Energystatistics";
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 { handleExport } from "@/utils/export.js";

export default {
  name: "User",
  dicts: [
    "sys_normal_disable",
    "sys_user_sex",
    "public_share_type",
    "monitor_hierarchy",
  ],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      title2: "",
      opentwo: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      dateRangeone: "",
      dateRangetwo: "",
      dateRangeoneSelect:"",
      dateRangetwoSelect:"",
      // 岗位选项
      postOptions: [],
      deptOptionsselect: [],
      // 角色选项
      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",
      },
      // 查询参数
      queryParams: {
        pageNum: NaN,
        isAsc: "asc",
        energyType: 2,
        monitorIdList: "",
        beginCollectTime: "",
        endCollectTime: "",
        publicShareType: "",
        monitorHierarchy: "",
      },
      // 列信息
      columns: [
        { key: 0, label: `计量设备编号`, visible: true },
        { key: 1, label: `计量设备名称`, visible: true },
        { key: 2, label: `安装位置`, visible: true },
        { key: 3, label: `所属用户`, visible: true },
        { key: 4, label: `用电量(kW·h)`, visible: true },
        { key: 5, label: `仪表值(kW·h)`, visible: true },
        { key: 6, label: `时间范围`, visible: true },
        { key: 7, label: `父级计量设备编号`, visible: false },
        { key: 8, label: `父级计量设备名称`, visible: false },
        { key: 9, label: `是否虚拟表`, visible: false },
      ],
      // 表单校验
      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",
          },
        ],
      },
      //采集方式
      dict1: [
        { label: "手动", value: "0" },
        { label: "自动", value: "1" },
        { label: "抄表", value: "2" },
      ],
      formadd: {
        monitorIds: [],
      },
      // 合计电量
      number: "",
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.dateRangeone = new Date(new Date().setHours(0, 0, 0, 0));
    var d = new Date(this.dateRangeone);
    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.dateRangeone = d.getFullYear() + "-" + m + "-" + tian;
    this.dateRangeoneSelect = this.dateRangeone;
    this.dateRangetwo = new Date(
      new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
    );
    var d1 = new Date(this.dateRangetwo);
    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.dateRangetwo = d1.getFullYear() + "-" + m1 + "-" + tian1;
    this.dateRangetwoSelect = this.dateRangetwo
    //this.dateRangetwo = d1.getFullYear()+ '-'+m1+ '-'+tian1+ ' '+ h1+ ':'+M1+':'+s1;

    this.getList();
    //this.getDeptTree();
  },
  mounted() {},
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      this.queryParams.beginCollectTime = this.dateRangeone;
      this.queryParams.endCollectTime = this.dateRangetwo;
      this.number = 0;
      if (this.dateRangeone == "" || this.dateRangetwo == ""){
        return;
      }
      listUser(this.queryParams).then((response) => {
        this.userList = response.rows;
        this.total = response.total;
        this.userList.forEach((item) => {
          this.number =  parseFloat(this.number) + parseFloat(item.expend);
          });
        this.number = this.number.toFixed(2);
        if (this.queryParams.monitorHierarchy == "" && this.queryParams.publicShareType == ""){
          this.queryParams.type = 0;
          this.queryParams.energyType = 2;
          this.queryParams.relationId = 1;
          // previewPolyline(this.queryParams).then((res) => {
          //   this.number = res.data.sumEnergyValue;
          //   alert("1")
          // })
        }
        this.loading = false;
      });
    },
    //数组转树形结构
    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;
    },
    /** 真查询部门下拉树结构 */
    handleExport1() {
      treeDat().then((response) => {
        response.map((item, index) => {
          item, (item.oid = item.id), (item.lable = item.name);
        });
        this.deptOptionsselect = this.tranListToTreeData(response);
        // console.log(this.deptOptionsselect);
        this.opentwo = true;
        this.title2 = "设备计量信息选择";
        //this.deptOptions = response.data;
      });
    },
    // 二次弹窗节点单击事件
    handleCheckChange(data, checked, indeterminat) {
      console.log("data", data, checked, indeterminat);
      // this.formadd.deptId = data.label;
      //this.monitorIdslist.push(data.monitorId);
      if (checked === false) {
        this.formadd.monitorIds.map((item, index) => {
          if (data.monitorId == item) {
            this.formadd.monitorIds.splice(index, 1);
          }
        });
      } else {
        this.formadd.monitorIds.push(data.monitorId);
      }

      console.log("this.formadd.monitorIds", this.formadd.monitorIds);
      // this.handleQuery();
    },
    //二次弹窗确认按钮
    submitFormtwo: function () {
      this.queryParams.monitorIdList = this.formadd.monitorIds.join(",");
      this.canceltwo();
      this.handleQuery();
      //let paramsstr = this.formadd.monitorIds.join('+');
      // console.log('paramsstr',paramsstr);
      // editMeterReading({paramsstr}).then(response => {
      //   if(response.msg=== "操作成功"){
      //     this.$message({
      //     message: '一键秒表成功',
      //     type: 'success'
      //   });
      //     this.canceltwo();
      //     //this.getList();
      //   }else{
      //     this.$message.error('一键秒表失败');
      //   }
      // });
    },
    canceltwo() {
      this.opentwo = false;
      this.resettwo();
    },
    resettwo() {
      this.formadd = {
        monitorIds: [],
      };
    },
    // 筛选节点
    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() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      //this.dateRange = [];
      this.dateRangeone = this.dateRangeoneSelect;
      this.dateRangetwo = this.dateRangetwoSelect;
      this.queryParams.monitorIdList = "";
      //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);
    },
  },
};
</script>
<style lang="scss" scoped>
.tree {
  width: 220px;
  ::v-deep .el-tree-node {
    white-space: normal; //关键代码!!!!!!!!!
    .el-tree-node__content {
      height: 100%;
      align-items: start;
    }
  }
}
.total {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
  font-weight: 600;
  position: relative;
  top: 4px;
  left: 15px;
  // .number {

  // }
  .alltotal {
    margin-left: 5px;
  }
}
</style>