添加页面 数据推送

ZZJ

2022-09-23 098a75c8574ae1d49a71a0a5f12ab653af222f31

添加页面 数据推送

 src/api/report.ts

@@ -62,3 +62,45 @@
    params: query
  })
}

/**
 * 
 * 数据推送 设备信息维护
查询设备
 */
export const getDevicesList = (query: any) => {
  return request({
    url: "/api-a/v1/devices/list",
    method: "get",
    params: query
  })
}

// 添加设备
// 参数 json
export const devicesCreate = (query: any) => {
  return request({
    url: "/api-a/v1/devices/create",
    method: "post",
    // data: qs.stringify(query)
    data: query
  })
}

// 修改，参数：返回值的所有属性
export const devicesUpdate = (query: any) => {
  return request({
    url: "/api-a/v1/devices/update",
    method: "post",
    data: query
  })
}

// 删除，参数 id
export const devicesDelete = (query: any) => {
  return request({
    url: "/api-a/v1/devices/delete",
    method: "get",
    params: query
  })
}

 src/router/index.js

@@ -131,6 +131,14 @@
    }
  },
  {
    path: "/dataPush",
    name: "dataPush",
    component: () => import(/* webpackChunkName: "about" */ "../views/dataPush"),
    meta: {
      title: "数据推送"
    }
  },
  {
    // 实时监控
    path: "/video",
    name: "video",

 src/views/dataPush/index.vue

New file
@@ -0,0 +1,71 @@
<template>
  <div class="data-report">
    <!-- 页头 -->
    <IndexHeader :opacity="false"></IndexHeader>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <!-- <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/manageCenter' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>推送管理</el-breadcrumb-item>
      </el-breadcrumb> -->
    </div>

    <!-- 主要内容 -->
    <div class="content">
      <dataPush></dataPush>
    </div>

    <!-- 页尾 -->
    <!-- <Footer :isBlack="true"></Footer> -->
  </div>
</template>

<script>
import IndexHeader from "@/components/IndexHeader"
// import DevList from "@/views/report/components/DevList"
import dataPush from "@/views/personalCenter/components/dataPush.vue"
// import SettingBox from "@/views/report/components/SettingBox"
import Footer from "@/components/Footer"

export default {
  components: {
    IndexHeader,
    dataPush
    // SettingBox,
    // Footer
  }
}
</script>

<style lang="scss" scoped>
.data-report {
  background-color: rgb(243, 245, 248);
  position: relative;
  min-height: 50vh;

  .breadcrumb {
    height: 10px;
  }
  .el-breadcrumb {
    margin-top: 48px;
    margin-bottom: 24px;

    ::v-deep span {
      color: #666;
    }
  }
  .content {
    min-height: 856px;
    box-sizing: border-box;
    background-color: #fff;
    width: 1036px;
    margin: 0 auto;
  }
  .Footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>

 src/views/manageCenter/index.vue

@@ -322,6 +322,14 @@
        },

        {
          name: "数据推送",
          icon: "/images/manageCenter/push.png",
          openPath: "/dataPush",
          path: "/dataPush",
          permission: "dataPush"
        },

        {
          name: "实时监控",
          icon: "/images/manageCenter/video.png",
          openPath: "/video",

 src/views/personalCenter/components/components/device.vue

New file
@@ -0,0 +1,553 @@
<template>
  <div class="sub-account" v-if="!isShowAdd">
    <div class="btns">
      <div class="button add" @click="addDevice">
        <span class="iconfont">&#xe614;</span>
        <span>添加设备</span>
      </div>
    </div>

    <div class="table-area">
      <el-table
        id="multipleTable"
        ref="multipleTable"
        :data="dataList"
        :fit="true"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
      >
        <el-table-column prop="devName" label="设备名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="devId" label="设备ID" show-overflow-tooltip></el-table-column>
        <el-table-column prop="devIp" label="设备IP" show-overflow-tooltip></el-table-column>
        <el-table-column prop="devCode" label="设备编码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="companyCode" label="企业编码" show-overflow-tooltip></el-table-column>

        <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <span class="iconfont option" @click="editUser(scope.row)">编辑</span>
            <span class="iconfont option" style="color:red" @click="delUser(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @current-change="refrash"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20, 25]"
          :total="total"
          background
        ></el-pagination>
      </div>
    </div>
  </div>
  <div class="sub-account" v-else-if="isShowAdd">
    <!-- <div class="add-title" @click="isShowAdd = false">
      <span class="iconfont">&#xe614;</span>
      <span>子账户管理</span>
    </div> -->
    <div class="head-name" style="margin-bottom:20px">编辑设备</div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      :label-position="'left'"
      ref="ruleForm"
      label-width="100px"
      class="add-ruleForm"
    >
      <el-form-item label="设备名称" prop="devName">
        <el-input v-model="ruleForm.devName" placeholder="请输入设备名称" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="设备ID" prop="devId">
        <el-input v-model="ruleForm.devId" placeholder="请输入设备ID" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="设备IP" prop="devIp">
        <el-input v-model="ruleForm.devIp" placeholder="请输入设备IP" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="设备编码" prop="devCode">
        <el-input v-model="ruleForm.devCode" placeholder="请输入设备编码" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="企业编码" prop="companyCode">
        <el-input v-model="ruleForm.companyCode" placeholder="请输入企业编码" style="width: 350px"></el-input>
      </el-form-item>
    </el-form>
    <div class="right">
      <div class="button searchBtn" @click="saveUser">保存</div>
      <div class="button resetBtn" @click="resetUser">重置</div>
      <div class="button resetBtn" style="margin-left:20px" @click="goback">返回</div>
    </div>
  </div>
</template>

<script>
import { getDevicesList, devicesCreate, devicesUpdate, devicesDelete } from "@/api/report"

export default {
  data() {
    return {
      isShowAdd: false, //是否展示新增弹窗
      dataList: [],
      tip: 1,
      ruleForm: {
        //y
        devName: "",
        devId: "",
        devIp: "",
        devCode: "",
        companyCode: "",

        id: "",
        createdAt: "",
        state: "",
        updatedAt: ""
      },
      rules: {
        devName: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
        devId: [{ required: true, message: "请输入设备ID", trigger: "blur" }],
        devIp: [{ required: true, message: "请输入设备IP", trigger: "blur" }],
        devCode: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
        companyCode: [{ required: true, message: "请输入企业编码", trigger: "blur" }]
      },
      page: 1,
      size: 10, //分页相关
      total: 0 //总数,
    }
  },
  created() {
    this.fetchDevicesList()
  },
  mounted() {},
  methods: {
    async fetchDevicesList() {
      let res = await getDevicesList({ pageIndex: this.page, pageSize: this.size })
      this.dataList = res.data
      this.total = res.total
    },
    delUser(row) {
      console.log(row, "row")
      this.$confirm("确认要删除该用户吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        let rsp = await devicesDelete({ id: row.id })
        if (rsp && rsp.success) {
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        }
        this.fetchDevicesList()
      })
    },
    //分页功能
    handleSizeChange(size) {
      this.size = size
      this.fetchDevicesList()
    },
    //分页功能
    refrash(page) {
      this.page = page
      this.fetchDevicesList()
    },

    addDevice() {
      this.isShowAdd = true
      this.tip = 1
      this.resetUser()
    }, //y
    resetUser() {
      //devName , devId , devIp, devCode, companyCode
      this.ruleForm = {
        devName: "",
        devId: "",
        devIp: "",
        devCode: "",
        companyCode: ""
      }
    },
    saveUser() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.tip === 1) {
            let params = {
              devName: this.ruleForm.devName,
              devId: this.ruleForm.devId,
              devIp: this.ruleForm.devIp,
              devCode: this.ruleForm.devCode,
              companyCode: this.ruleForm.companyCode
            }
            // console.log(params, "params")
            devicesCreate(params).then((res) => {
              // console.log(res, "res")
              if (res && res.success) {
                // Notification({
                //   title: "成功",
                //   showClose: true,
                //   message: res.data,
                //   type: "success"
                // })
                this.$message({
                  type: "success",
                  message: res.data
                })
                this.goback()
              }
            })
          } else if (this.tip === 2) {
            let params = {
              devName: this.ruleForm.devName,
              devId: this.ruleForm.devId,
              devIp: this.ruleForm.devIp,
              devCode: this.ruleForm.devCode,
              companyCode: this.ruleForm.companyCode,
              id: this.ruleForm.id,
              createdAt: this.ruleForm.createdAt,
              state: this.ruleForm.state,
              updatedAt: this.ruleForm.updatedAt
            }
            devicesUpdate(params).then((res) => {
              console.log(res, "res")
              if (res && res.success) {
                this.$message({
                  type: "success",
                  message: res.msg
                })
                this.goback()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    goback() {
      this.isShowAdd = false
    },
    async editUser(row) {
      this.tip = 2
      this.isShowAdd = true
      this.ruleForm.devName = row.devName
      this.ruleForm.devId = row.devId
      this.ruleForm.devIp = row.devIp
      this.ruleForm.devCode = row.devCode
      this.ruleForm.companyCode = row.companyCode
      this.ruleForm.id = row.id
      this.ruleForm.createdAt = row.createdAt
      this.ruleForm.state = row.state
      this.ruleForm.updatedAt = row.updatedAt
    }
  }
}
</script>

<style scoped lang="scss">
.sub-account {
  padding: 20px;
  .head-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #3d3d3d;
    border-left: 4px solid #0065ff;
    padding-left: 10px;
  }
  .add-title {
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    line-height: 22px;
    color: #3d3d3d;
    margin-bottom: 30px;
    .iconfont {
      margin-right: 10px;
    }
  }
  .add-ruleForm::v-deep {
    .el-input__inner {
      color: #3d3d3d;
      border-radius: 4px;
      border-color: #c0c5cc;
      height: 32px;
      line-height: 32px;
      border-color: #c0c5cc;
    }
    .user-tree {
      .el-form-item__label:before {
        content: "*";
        color: #f52323;
        margin-right: 4px;
      }
      .el-form-item__content {
        display: flex;
        .tree-box {
          .t {
            height: 32px;
            background: #f0f5fa;
            border-radius: 3px 3px 0px 0px;
            line-height: 32px;
            text-align: center;
            border-bottom: 1px solid #c0c5cc;
          }
          width: 336px;
          height: 480px;
          border: 1px solid #c0c5cc;
          margin-right: 20px;
          box-sizing: border-box;
        }
      }
    }
  }
  .searchBtn {
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background: #0065ff;
    margin-right: 20px;
  }
  .right {
    display: flex;
  }
  .resetBtn {
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    color: #0065ff;
    box-sizing: border-box;
    border: 1px solid #0065ff;
  }
  .search {
    display: flex;
    font-size: 14px;
    border-bottom: 1px solid #e9ebee;
    margin-top: 30px;
    padding-bottom: 20px;
    .left,
    .right,
    .id,
    .time,
    .cluster {
      display: flex;
      align-items: center;
      .el-select {
        width: auto;
      }
    }

    .id .el-input ::v-deep {
      width: 200px;
    }

    .cluster::v-deep .el-input {
      width: 300px;

      margin-left: 10px;
      margin-right: 20px;
      .el-input__icon {
        line-height: 32px;
      }
      input {
        border-radius: 0;

        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      }
    }

    .el-input ::v-deep {
      width: 200px;
      margin-left: 10px;
      margin-right: 20px;
      height: 32px;
      line-height: 32px;
      input {
        border-radius: 0;
        height: 32px;
        line-height: 32px;
        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      }
    }

    .el-date-editor {
      width: 318px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;
      border-radius: 0;

      &::-webkit-input-placeholder {
        color: #999;
      }

      &.is-active {
        border-color: #0065ff;
      }
    }
  }

  .btns {
    display: flex;
    margin: 20px 0;
    text-align: center;
    .add {
      margin-right: 20px;
      width: 126px;
      height: 32px;
      background: #0065ff;
      color: #fff;
      span {
        margin-right: 5px;
        line-height: 32px;
        font-size: 14px;
      }
    }

    .export {
      width: 126px;
      height: 32px;
      border: 1px solid #0065ff;
      color: #0065ff;
      box-sizing: border-box;
      span {
        margin-right: 5px;
        line-height: 32px;
        font-size: 14px;
      }
    }
  }

  .el-table ::v-deep {
    background-color: rgb(233, 235, 238);
    padding: 1px;

    &::after {
      display: none;
    }

    td.index .cell {
      padding-left: 16px;
      padding-right: 4px;
    }

    .has-gutter tr th {
      background: #f0f3f5;
      font-size: 16px;
      color: #3d3d3d;
      font-weight: 700;
    }

    td .cell {
      color: #3d3d3d;
    }

    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }
    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }

    .status {
      color: #ff4b33;

      &.green {
        color: #36b24a;
      }
    }

    .option {
      margin-right: 10px;
      font-size: 14px;
      color: rgb(0, 101, 255);
      cursor: pointer;
    }
  }

  .el-pagination ::v-deep {
    margin-top: 30px;
    text-align: center;
    height: 24px;
    .el-pagination__sizes {
      margin-right: 0;
    }

    button {
      margin: 0;
      background-color: #fff;
      border: 1px solid #c0c5cc;
      border-radius: 2px;
    }

    .number {
      background-color: #fff;

      &:not(.disabled):hover {
        color: #0065ff;
      }

      &:not(.disabled).active {
        background-color: #0065ff;
        color: #fff;
      }
    }

    .el-input .el-input__inner {
      padding-left: 0;

      &:hover,
      &:focus {
        border-color: #0065ff;
      }
    }
  }

  .el-select ::v-deep {
    .el-select__tags-text {
      color: #3d3d3d;
    }
  }
}
</style>

<style>
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  background-color: #0065ff;
}

.el-button--text span {
  color: #0065ff;
}

.el-button.is-plain:hover,
.el-button.is-plain:focus {
  color: #0065ff;
  border-color: #0065ff;
}
</style>

 src/views/personalCenter/components/components/point.vue

New file
@@ -0,0 +1,813 @@
<template>
  <div class="sub-account" v-if="!isShowAdd">
    <div class="btns">
      <div class="button add" @click="addPoint">
        <span class="iconfont">&#xe614;</span>
        <span>添加点位</span>
      </div>
    </div>

    <div class="table-area">
      <el-table
        id="multipleTable"
        ref="multipleTable"
        :data="dataList"
        :fit="true"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
      >
        <el-table-column prop="a" label="点位名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="b" label="报警通道编码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="c" label="企业编码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="d" label="推送场景" show-overflow-tooltip></el-table-column>
        <el-table-column prop="e" label="推动时间" show-overflow-tooltip></el-table-column>

        <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <span class="iconfont option" style="color:red" @click="delUser(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @current-change="refrash"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20, 25]"
          :total="total"
          background
        ></el-pagination>
      </div>
    </div>
  </div>
  <div class="sub-account" v-else-if="isShowAdd">
    <!-- <div class="add-title" @click="isShowAdd = false">
      <span class="iconfont">&#xe614;</span>
      <span>子账户管理</span>
    </div> -->
    <div class="head-name" style="margin-bottom:20px">编辑点位</div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      :label-position="'left'"
      ref="ruleForm"
      label-width="100px"
      class="add-ruleForm"
    >
      <el-form-item label="点位名称" prop="a">
        <el-input v-model="ruleForm.a" placeholder="请输入点位名称" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="报警通道编码" prop="b">
        <el-input v-model="ruleForm.b" placeholder="请输入报警通道编码" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="企业编码" prop="c">
        <el-input v-model="ruleForm.c" placeholder="请输入企业编码" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="推送场景" prop="d">
        <el-input v-model="ruleForm.d" placeholder="请输入推送场景" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="推动时间" prop="e">
        <el-input v-model="ruleForm.e" placeholder="请输入推动时间" style="width: 350px"></el-input>
      </el-form-item>
    </el-form>
    <div class="right">
      <div class="button searchBtn" @click="saveUser">保存</div>
      <div class="button resetBtn" @click="resetUser">重置</div>
      <div class="button resetBtn" style="margin-left:20px" @click="goback">返回</div>
    </div>
  </div>
</template>

<script>
import { findUserList, saveSubUser, getMenu, getDataTree, deleteUser } from "@/api/user"
import { findTaskById, updateTask } from "@/api/report"
import { getAreas, getDic } from "@/api/login"

export default {
  computed: {
    taskOptions() {
      return this.VideoPhotoData.tasks.filter((item) => !item.isDelete)
    }
  },
  data() {
    const validateTree = (rule, value, callback) => {
      if (
        this.ruleForm.menuIds &&
        this.ruleForm.dataIds &&
        this.ruleForm.menuIds.length > 0 &&
        this.ruleForm.dataIds.length > 0
      ) {
        callback()
      } else {
        callback(new Error("请选菜单权限和数据权限"))
      }
    }
    return {
      searchTime: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD HH:mm:ss")], //搜索时间
      page: 1,
      size: 10, //分页相关
      total: 0, //总数,
      inputText: "", //输入框内容
      activeStep: 0,
      activeIndex: 0,
      industrys: [],
      treeHeight: 750,
      treeData: [],
      treeSettings: {
        check: {
          enable: true
        }
      },
      options: {
        lazy: true,
        lazyLoad(node, resolve) {
          // 懒加载节点省市数据
          const { level } = node
          let nodes
          getAreas({ parentId: level == 0 ? 0 : node.value })
            .then((json) => {
              nodes = json.data.list
              nodes = nodes.map((item) => ({
                value: item.id,
                label: item.name,
                level: item.level,
                leaf: level >= 1
              }))
              resolve(nodes)
            })
            .catch((err) => {
              console.log(err)
            })
        }
      },
      dataList: [],
      isShowAdd: false, //是否展示新增弹窗
      isShowUnbind: false, //是否展示解绑弹窗
      isShowRelate: false,
      isEditing: false,
      unbindId: "",
      durationArr: [
        {
          value: 1,
          label: "1年"
        },
        {
          value: 2,
          label: "2年"
        },
        {
          value: 3,
          label: "3年"
        }
      ], //所属集群下拉框
      timeLength: null, //选中的授权时长
      showQuit: false, //展示退出集群的弹窗
      showJoin: false, //展示加入集群的弹窗
      activeEquipment: null, //处理中的设备
      checkedData: [],
      checkedMenu: [],
      ruleForm: {
        //y
        a: "",
        b: "",
        c: "",
        d: "",
        e: "",
        id: "",
        username: "",
        userType: "",
        password: "",
        trueName: "",
        companyName: "",
        phoneNum: "",
        email: "basic",
        isChangePwd: false,
        industryId: "",
        address: [],
        authDuration: 3,
        areaId: "",
        provinceId: "",
        menuIds: [],
        dataIds: []
      },
      rules: {
        //y
        a: [{ required: true, message: "请输入点位名称", trigger: "blur" }],
        b: [{ required: true, message: "请输入报警通道编码", trigger: "blur" }],
        c: [{ required: true, message: "请输入企业编码", trigger: "blur" }],
        d: [{ required: true, message: "请输入推送场景", trigger: "blur" }],
        e: [{ required: true, message: "请输入推动时间", trigger: "blur" }]
      },
      sysMenus: [],
      DataTree: [],
      smsSceneConfig: [],
      smsLevelConfig: [],
      smsEnable: false,
      userInfo: {},
      curEditId: "",
      defaultProp: {
        children: "children",
        label: "name"
      },
      levelOptions: [
        { value: "一级", label: "一级" },
        { value: "二级", label: "二级" },
        { value: "三级", label: "三级" },
        { value: "四级", label: "四级" },
        { value: "五级", label: "五级" }
      ]
    }
  },
  // created() {
  //   this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
  //   this.findUserList()
  //   this.getIndustrys()
  //   this.fetchSysMenus()
  //   this.fetchDataTree()
  // },
  // mounted() {
  //   this.TreeDataPool.reset()
  //   this.TreeDataPool.multiple = true
  //   this.VideoPhotoData.queryTaskList()
  // },
  methods: {
    fetchDataTree() {
      getDataTree({ userId: this.userInfo.id }).then((res) => {
        this.DataTree = res.data.dataTree
      })
    },
    fetchSysMenus() {
      getMenu().then((rsp) => {
        if (rsp && rsp.success) {
          this.sysMenus = rsp.data.menus
          // this.userMenus = [];
        }
      })
    },
    selectDevice(node, checked, hasChildren) {
      if (checked) {
        sessionStorage.setItem("clusterId", node.id)
        this.TreeDataPool.fetchTreeData()
        this.treeData = this.TreeDataPool.treeData
      } else {
        this.treeData = []
        this.TreeDataPool.reset()
      }
    },
    addPoint() {
      this.isShowAdd = true
      this.resetUser()
    },
    async editUser(row) {
      this.isShowAdd = true
      this.isEditing = true
      this.ruleForm.id = row.id
      this.ruleForm.username = row.username
      this.ruleForm.userType = row.userType
      this.ruleForm.password = row.password
      this.ruleForm.trueName = row.trueName
      this.ruleForm.companyName = row.companyName
      this.ruleForm.phoneNum = row.phoneNum
      this.ruleForm.email = row.email
      this.ruleForm.isChangePwd = false
      this.ruleForm.industryId = row.industryId
      this.ruleForm.areaId = row.areaId
      this.ruleForm.address = [row.provinceId, row.areaId]
      this.ruleForm.provinceId = row.provinceId
      this.ruleForm.authDuration = row.authDuration
      this.checkedMenu = row.menuIds
      this.checkedData = row.dataIds

      this.smsSceneConfig = []
      this.smsLevelConfig = []
      this.smsEnable = false
      findTaskById({ id: row.id }).then((rsp) => {
        if (rsp && rsp.success && rsp.data != "") {
          if (rsp.data.taskName != "") {
            this.smsSceneConfig = rsp.data.taskName.split(",")
          }
          if (rsp.data.level != "") {
            this.smsLevelConfig = rsp.data.level.split(",")
          }
          this.smsEnable = rsp.data.enable
        }
      })

      // 查询当前用户权限下所有可管理的摄像机
      if (row.dataIds) {
        sessionStorage.setItem("clusterId", row.dataIds[0])
        await this.TreeDataPool.fetchTreeData()
      }

      // 用email字段暂时代替摄像机集合字段
      let checkedCameras = row.email

      // basic 为子账户默认的空字段,表示可管理的摄像机目录为空
      if (checkedCameras == "basic") {
        return
      }

      // 反选摄像机
      if (checkedCameras.length) {
        let cameraIds = checkedCameras.split(",")
        this.$refs.ztreeMenus.updateNodes(cameraIds)
      }
    },
    delUser(row) {
      this.$confirm("确认要删除该用户吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        let rsp = await deleteUser({ id: row.id })
        if (rsp && rsp.success) {
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        }

        this.findUserList()
      })
    },
    resetUser() {
      this.ruleForm = {
        id: "",
        username: "",
        userType: "",
        password: "",
        trueName: "",
        companyName: "",
        phoneNum: "",
        email: "",
        isChangePwd: false,
        address: [],
        industryId: "",
        areaId: "",
        provinceId: "",
        authDuration: 1
      }
      this.smsSceneConfig = []
      this.smsLevelConfig = []
      this.smsEnable = false
      this.$nextTick(() => {
        this.$refs.treeMenus.setCheckedKeys([])
        this.$refs.treeData.setCheckedKeys([])
      })
    },
    async getIndustrys() {
      let res = await getDic()
      if (res.success) {
        this.industrys = res.data.dics
      } else {
        console.log("查询行业列表失败！")
      }
    },
    saveUser() {
      let _this = this
      this.ruleForm.menuIds = this.$refs.treeMenus.getCheckedKeys()
      this.ruleForm.dataIds = this.$refs.treeData.getCheckedKeys()
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let json = {
            id: this.isEditing ? this.ruleForm.id : "",
            username: this.ruleForm.username,
            password: this.ruleForm.password,
            isChangePwd: this.ruleForm.isChangePwd,
            userType: this.ruleForm.userType,
            trueName: this.ruleForm.trueName,
            companyName: this.ruleForm.companyName,
            phoneNum: this.ruleForm.phoneNum,
            industryId: this.ruleForm.industryId,
            areaId: this.ruleForm.address.length == 2 ? this.ruleForm.address[1] : "",
            authDuration: this.ruleForm.authDuration,
            menuIds: this.ruleForm.menuIds,
            dataIds: this.ruleForm.dataIds
          }

          // 获取子账户选中的摄像机列表
          let cameraIds = this.TreeDataPool.selectedNodes
          if (cameraIds.length == 0) {
            json.email = "basic"
          } else {
            json.email = cameraIds.join(",")
          }

          // 编辑不提交密码
          if (this.isEditing) {
            delete json.password
            json.isChangePwd = false
          }

          if (typeof json.areaId === "string") {
            delete json.areaId
          }

          if (typeof json.authDuration === "string") {
            delete json.authDuration
          }

          // return
          saveSubUser(json)
            .then((res) => {
              if (res.success) {
                // 保存消息推送
                if (_this.isEditing) {
                  let smsTaskInfo = {
                    id: _this.ruleForm.id,
                    taskName: _this.smsSceneConfig.join(","),
                    level: _this.smsLevelConfig.join(","),
                    cameras: json.email,
                    person: json.trueName,
                    tel: json.phoneNum,
                    enable: _this.smsEnable,
                    IsDel: "0"
                  }

                  updateTask(smsTaskInfo).then((rsp) => {
                    // console.log(rsp)
                  })
                }

                _this.$notify.success(res.data)
                _this.isShowAdd = false
                _this.isEditing = false
                _this.findUserList()
              } else {
                _this.$notify.error(res.msg)
              }
            })
            .catch((err) => {
              _this.$notify.error(err.data.msg)
            })
        } else {
          return false
        }
      })
    },
    findUserList() {
      findUserList({
        inputText: this.inputText,
        page: this.page,
        size: this.size,
        authDuration: this.timeLength
      })
        .then((res) => {
          if (res.success) {
            this.dataList = res.data.dataList
            this.total = res.data.total
          } else {
            this.$notify.error("加载子账户列表失败")
          }
        })
        .catch((e) => {
          this.$notify.error(e.msg)
        })
    },
    goback() {
      this.isShowAdd = false
      this.isEditing = false
      this.isShowRelate = false
      this.activeIndex = 0
    },
    goto(i) {
      this.activeIndex = i
    },
    reset() {
      this.inputText = ""
      this.timeLength = null
    },

    //分页功能
    handleSizeChange(size) {
      this.size = size
      this.findUserList()
    },
    //分页功能
    refrash(page) {
      this.page = page
      this.findUserList()
    },

    // 生成uuid
    getUuid() {
      let originStr = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      let originChar = "0123456789abcdef"
      let len = originChar.length
      return originStr.replace(/x/g, function(match) {
        return originChar.charAt(Math.floor(Math.random() * len))
      })
    }
  }
}
</script>

<style scoped lang="scss">
.sub-account {
  padding: 20px;
  .head-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #3d3d3d;
    border-left: 4px solid #0065ff;
    padding-left: 10px;
  }
  .add-title {
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    line-height: 22px;
    color: #3d3d3d;
    margin-bottom: 30px;
    .iconfont {
      margin-right: 10px;
    }
  }
  .add-ruleForm::v-deep {
    .el-input__inner {
      color: #3d3d3d;
      border-radius: 4px;
      border-color: #c0c5cc;
      height: 32px;
      line-height: 32px;
      border-color: #c0c5cc;
    }
    .user-tree {
      .el-form-item__label:before {
        content: "*";
        color: #f52323;
        margin-right: 4px;
      }
      .el-form-item__content {
        display: flex;
        .tree-box {
          .t {
            height: 32px;
            background: #f0f5fa;
            border-radius: 3px 3px 0px 0px;
            line-height: 32px;
            text-align: center;
            border-bottom: 1px solid #c0c5cc;
          }
          width: 336px;
          height: 480px;
          border: 1px solid #c0c5cc;
          margin-right: 20px;
          box-sizing: border-box;
        }
      }
    }
  }
  .searchBtn {
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background: #0065ff;
    margin-right: 20px;
  }
  .right {
    display: flex;
  }
  .resetBtn {
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    color: #0065ff;
    box-sizing: border-box;
    border: 1px solid #0065ff;
  }
  .search {
    display: flex;
    font-size: 14px;
    border-bottom: 1px solid #e9ebee;
    margin-top: 30px;
    padding-bottom: 20px;
    .left,
    .right,
    .id,
    .time,
    .cluster {
      display: flex;
      align-items: center;
      .el-select {
        width: auto;
      }
    }

    .id .el-input ::v-deep {
      width: 200px;
    }

    .cluster::v-deep .el-input {
      width: 300px;

      margin-left: 10px;
      margin-right: 20px;
      .el-input__icon {
        line-height: 32px;
      }
      input {
        border-radius: 0;

        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      }
    }

    .el-input ::v-deep {
      width: 200px;
      margin-left: 10px;
      margin-right: 20px;
      height: 32px;
      line-height: 32px;
      input {
        border-radius: 0;
        height: 32px;
        line-height: 32px;
        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      }
    }

    .el-date-editor {
      width: 318px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;
      border-radius: 0;

      &::-webkit-input-placeholder {
        color: #999;
      }

      &.is-active {
        border-color: #0065ff;
      }
    }
  }

  .btns {
    display: flex;
    margin: 20px 0;
    text-align: center;
    .add {
      margin-right: 20px;
      width: 126px;
      height: 32px;
      background: #0065ff;
      color: #fff;
      span {
        margin-right: 5px;
        line-height: 32px;
        font-size: 14px;
      }
    }

    .export {
      width: 126px;
      height: 32px;
      border: 1px solid #0065ff;
      color: #0065ff;
      box-sizing: border-box;
      span {
        margin-right: 5px;
        line-height: 32px;
        font-size: 14px;
      }
    }
  }

  .el-table ::v-deep {
    background-color: rgb(233, 235, 238);
    padding: 1px;

    &::after {
      display: none;
    }

    td.index .cell {
      padding-left: 16px;
      padding-right: 4px;
    }

    .has-gutter tr th {
      background: #f0f3f5;
      font-size: 16px;
      color: #3d3d3d;
      font-weight: 700;
    }

    td .cell {
      color: #3d3d3d;
    }

    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }
    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }

    .status {
      color: #ff4b33;

      &.green {
        color: #36b24a;
      }
    }

    .option {
      margin-right: 10px;
      font-size: 14px;
      color: rgb(0, 101, 255);
      cursor: pointer;
    }
  }

  .el-pagination ::v-deep {
    margin-top: 30px;
    text-align: center;
    height: 24px;
    .el-pagination__sizes {
      margin-right: 0;
    }

    button {
      margin: 0;
      background-color: #fff;
      border: 1px solid #c0c5cc;
      border-radius: 2px;
    }

    .number {
      background-color: #fff;

      &:not(.disabled):hover {
        color: #0065ff;
      }

      &:not(.disabled).active {
        background-color: #0065ff;
        color: #fff;
      }
    }

    .el-input .el-input__inner {
      padding-left: 0;

      &:hover,
      &:focus {
        border-color: #0065ff;
      }
    }
  }

  .el-select ::v-deep {
    .el-select__tags-text {
      color: #3d3d3d;
    }
  }
}
</style>

<style>
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  background-color: #0065ff;
}

.el-button--text span {
  color: #0065ff;
}

.el-button.is-plain:hover,
.el-button.is-plain:focus {
  color: #0065ff;
  border-color: #0065ff;
}
</style>

 src/views/personalCenter/components/dataPush.vue

New file
@@ -0,0 +1,55 @@
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="设备信息维护" name="first">
        <device></device>
      </el-tab-pane>
      <el-tab-pane label="点位信息维护" name="second">
        <point></point>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import device from "./components/device.vue"
import point from "./components/point.vue"

export default {
  components: {
    device,
    point
  },
  data() {
    return {
      activeName: "first"
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event, this.activeName)
    }
  }
}
</script>

<style scoped lang="scss"></style>

<style>
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  background-color: #0065ff;
}

.el-button--text span {
  color: #0065ff;
}

.el-button.is-plain:hover,
.el-button.is-plain:focus {
  color: #0065ff;
  border-color: #0065ff;
}
</style>