qilu_hospital_front/src/views/alarmcenter/point/list.vue

<template>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud"
      :permission="permissionList" @search-change="searchChange" @search-reset="searchReset"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
      </template>
      <template #menu="{ row, index, size }">
        <el-button type="text" :size="size" icon="el-icon-view" @click="$refs.crud.rowEdit(row, index)">详情</el-button>
        <el-button type="text" :size="size" icon="el-icon-edit" @click="$refs.crud.rowEdit(row, index)">编辑</el-button>
        <el-button type="text" :size="size" icon="el-icon-delete" @click="$refs.crud.rowDel(row, index)">删除</el-button>
      </template>
    </avue-crud>
    <!-- 关联摄像头/手持终端 -->
    <el-dialog title="报警点设置" :visible.sync="dialogVisible" :append-to-body="true" :close-on-click-modal="false"
      :close-on-press-escape="false" custom-class="dia_box">
      <el-form ref="form" v-model="addForm" label-width="100px" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报警点：" prop="warnName">
              <el-input v-model="addForm.warnName" placeholder="请输入" :readonly="isDetail ? true : false" maxlength="30">
              </el-input>
            </el-form-item>
            <el-form-item label="经度：" prop="longitude">
              <el-input v-model="addForm.longitude" placeholder="请输入" :readonly="isDetail ? true : false" maxlength="30">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在区域：" prop="warnAddress">
              <el-input v-model="addForm.warnAddress" placeholder="请输入" :readonly="isDetail ? true : false" maxlength="30">
              </el-input>
            </el-form-item>
            <el-form-item label="纬度：" prop="latitude">
              <el-input v-model="addForm.latitude" placeholder="请输入" :readonly="isDetail ? true : false" maxlength="30">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-tabs v-model="deviceType" type="card" @tab-click="handleClick">
          <el-tab-pane label="摄像头" name="1">
            <el-table class="table_box" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" height="250px"
              @selection-change="(data) => selectionChange(data, '1')" row-key="id" :size="small">
              <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
              </el-table-column>
              <el-table-column prop="name" label="设备名称">
              </el-table-column>
              <el-table-column prop="imei" label="设备编号">
              </el-table-column>
              <el-table-column prop="deviceType" label="设备大类">
              </el-table-column>
              <el-table-column prop="deviceArea" label="所在区域">
              </el-table-column>
              <el-table-column prop="position" label="安装位置">
              </el-table-column>
            </el-table>
            <div class="page_box">
              <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                :current-page="page1.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="page1.pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :total="page1.total">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="手持终端" name="2">
            <el-table class="table_box" ref="multipleTable2" :data="tableData2" tooltip-effect="dark" style="width: 100%;" height="250px"
              @selection-change="(data) => selectionChange(data, '2')" row-key="id" :size="small">
              <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
              </el-table-column>
              <el-table-column prop="name" label="设备名称">
              </el-table-column>
              <el-table-column prop="imei" label="设备编号">
              </el-table-column>
              <el-table-column prop="deviceType" label="设备大类">
              </el-table-column>
              <el-table-column prop="deviceArea" label="所在区域">
              </el-table-column>
              <el-table-column prop="position" label="安装位置">
              </el-table-column>
            </el-table>
            <div class="page_box">
              <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                :current-page="page2.currentPage2" :page-sizes="[10, 20, 30, 40]" :page-size="page2.pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :total="page2.total">
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import { bizLogin, bizDeviceList, bizDeviceStatus, bizNodeType } from "@/api/wirelessintrusion/wirelessintrusion";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      addForm: {},
      rules: {
        warnName: [
          { required: true, message: '请输入报警点名称', trigger: 'blur' }
        ],
        warnAddress: [
          { required: true, message: '请输入报警位置', trigger: 'blur' }
        ],
        longitude: [
          { required: true, message: '请输入经度', trigger: 'blur' }
        ],
        latitude: [
          { required: true, message: '请输入纬度', trigger: 'blur' }
        ]
      },
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      selectionList2: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        dialogWidth: 950,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        dialogClickModal: false,
        column: [
          {
            label: "报警点",
            prop: "name",
            search: true,
          },
          {
            label: "所在区域",
            prop: "remark",
            search: true,
          },
          {
            label: "经纬度",
            prop: "name",
          },
          {
            label: "关联摄像头",
            prop: "node",
          },
          {
            label: "关联手持终端",
            prop: "nodeLabel",
          },
          {
            label: "创建时间",
            prop: "createTime",
            labelWidth: 120,
          }, {
            label: "最后更新时间",
            prop: "lastOnline",
          },
        ]
      },
      dialogVisible: false,
      deviceType: '1',//关联设备类型
      data: [],
      //摄像头设备
      page1: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      tableData: [],
      //手持终端设备
      page2: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      tableData2: [],
      nodeType: [],//节点类型
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.notice_add, false),
        viewBtn: this.vaildData(this.permission.notice_view, false),
        delBtn: this.vaildData(this.permission.notice_delete, false),
        editBtn: this.vaildData(this.permission.notice_edit, false)
      };
    },
  },
  mounted() {
  },
  methods: {
    //新增弹框
    handleAdd() {
      this.addForm = {};
      this.deviceType = '1';
      this.selectionList = [];
      this.selectionList2 = [];
      this.dialogVisible = true;
      this.queryDeviceList();
    },
    //切换设备类型
    handleClick(item) {
      this.queryDeviceList();
    },
    //设备查询
    queryDeviceList() {
      let token = window.sessionStorage.getItem('bizToken');
      if (token == 'undefined' || !token) {
        bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res => {
          window.sessionStorage.setItem('bizToken', res.data.data.token);
          if (this.deviceType == '1') {
            bizDeviceList(res.data.data.token, { pageSize: this.page1.pageSize, pageNum: this.page1.currentPage }).then(res2 => {
              const data = res2.data;
              this.page1.total = data.total;
              this.tableData = data.rows;
            });
          } else {
            bizDeviceList(res.data.data.token, { pageSize: this.page1.pageSize, pageNum: this.page1.currentPage, pid: 98 }).then(res2 => {
              const data = res2.data;
              this.page2.total = data.total;
              this.tableData2 = data.rows;
            });
          }
        })
      } else {
        if (this.deviceType == '1') {
          bizDeviceList(token, { pageSize: this.page1.pageSize, pageNum: this.page1.currentPage }).then(res2 => {
            const data = res2.data;
            this.page1.total = data.total;
            this.tableData = data.rows;
          });
        } else {
          bizDeviceList(token, { pageSize: this.page1.pageSize, pageNum: this.page1.currentPage, pid: 98 }).then(res2 => {
            const data = res2.data;
            this.page2.total = data.total;
            this.tableData2 = data.rows;
          });
        }
      }
    },
    //新增、编辑
    submitForm() {
      this.$refs.form.valid((valid) => {
        if(valid) {

        }
      })
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list, type) {
      if (type == '2') {
        this.selectionList2 = list;
      }
      else {
        this.selectionList = list;
      }
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = false;
      // let values = {
      //   ...params,
      //   ...this.query,
      //   pid: 98
      // };
      // let token = window.sessionStorage.getItem('bizToken');
      // if (token == 'undefined' || !token) {
      //   bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res => {
      //     window.sessionStorage.setItem('bizToken', res.data.data.token);
      //     this.loading = true;
      //     bizDeviceList(res.data.data.token, { ...values, pageSize: page.pageSize, pageNo: page.currentPage }).then(res2 => {
      //       const data = res2.data;
      //       this.page.total = data.total;
      //       this.data = data.records;
      //       this.loading = false;
      //     });
      //   })
      // } else {
      //   this.loading = true;
      //   bizDeviceList(token, { ...values, pageSize: page.pageSize, pageNo: page.currentPage }).then(res2 => {
      //     this.loading = false;
      //     this.selectionClear();
      //     if (res2.data.code == 401) {
      //       console.log(res2.data.code)
      //       window.sessionStorage.removeItem('bizToken');
      //       this.onLoad();
      //     }
      //     else if (res2.data.code == 200) {
      //       const data = res2.data;
      //       this.page.total = data.total;
      //       data.rows.map(item => {
      //         item.node = item.bizProduct.node;
      //         // item.nodeLabel = this.renderLabel(item.node,'node');
      //         // item.statusLabel = this.renderLabel(item.status,'status')
      //       })
      //       this.data = data.rows;
      //     }
      //   }, err => {
      //     this.loading = false;
      //   });
      // }
    },
    //摄像头
    handleCurrentChange1(currentPage) {
      this.page1.currentPage = currentPage;
      this.queryDeviceList();
    },
    handleSizeChange1(pageSize) {
      this.page1.currentPage = 1;
      this.page1.pageSize = pageSize;
      this.queryDeviceList();
    },
    //手持终端
    handleCurrentChange2(currentPage) {
      this.page2.currentPage = currentPage;
      this.queryDeviceList();
    },
    handleSizeChange2(pageSize) {
      this.page2.currentPage = 1;
      this.page2.pageSize = pageSize;
      this.queryDeviceList();
    },
  }
};
</script>

<style lang="scss" scoped>
.dia_box {
  height: 700px;
  overflow: auto;

  .el-table {
    width: 100% !important;
    border: 1px solid #D6D8DF;
  }

  .el-table th.el-table__cell {
    background: #F7F8FA;
  }

  .dialog-footer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page_box {
    width: 90%;
    margin-left: 9%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
  }
}
</style>