vchan.vue

<template>
    <div class="template-box content_div_main orgbox">
        <div class="left-box">
            <el-tree :data="orgData" :props="defaultProps" :default-expand-all="true" :render-content="renderContent" @node-click="handleNodeClick" ></el-tree>
        </div>
        <div class="org-right-box">
             <el-form :inline="true" class="search-form" size="small">
                <!-- <el-form-item label="组织：">
                  <el-input type="text" class="bra" v-model="search.org_name" placeholder="组织名"></el-input>
                </el-form-item>
                 <el-form-item label="地点：">
                  <el-input type="text" class="bla" placeholder="相机名称" v-model="search.address_name"></el-input>
                </el-form-item> -->
				<el-form-item label="社区选择：">
				  <el-select v-model="search.mallId" placeholder="请选择">
				   <el-option
				     v-for="item in mallData"
				    :key="item.unid" :value="item.id" :label="item.name"
				   ></el-option>
				   </el-select>
				</el-form-item>
				<el-form-item label="相机：">
				  <el-input type="text" class="bla" placeholder="相机名称" v-model="search.serialnum_like"></el-input>
				</el-form-item>
                <el-form-item>
                    <el-button class="search-btn" icon="el-icon-search" @click="searchVchan">查询</el-button>
                    <el-button class="search-btn" @click="addvchan()" icon="el-icon-plus">添加</el-button>
                </el-form-item>
             </el-form>
        <el-table :data="tableData" style="width: 98%;margin:10px auto;" v-loading.body="loading">
            <el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
            <el-table-column label="相机编号" property="serialnum"> </el-table-column>
            <el-table-column label="相机名称" property="name"> </el-table-column>
            <el-table-column label="相机属性">
              <template slot-scope="scope">
                <span>{{showent(scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="IP" property="localIp" align="center"> </el-table-column>
            <el-table-column label="所属组织" property="mall.name" align="center"> </el-table-column>
            <el-table-column label="所属地点" property="address_name" align="center"> </el-table-column>
            <el-table-column label="操作" width="350px" align="center">
                <template slot-scope="scope">
                <div class="tab-btn-box">
                    <span class="table-btn" size="" @click="editvchan(scope.$index, scope.row,1)">修改</span>
                    <span class="table-btn" size="" @click="deletevchan(scope.$index, scope.row,2)">删除</span>
                </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="mt10" @current-change="handleCurrentChange" :current-page.sync="page.currentPage"
          :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total" background >
        </el-pagination>
      <!-- <infoDialog ref='infoDialog' @refresh='refreshInfo'></infoDialog> -->
        </div>
    <el-row>
      <addvchan ref="vchan" :addvdialog="addvdialog" :state="state" :editData="editData" @closedialog="closedialog"></addvchan>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import addvchan from "./adddev";
export default {
  data() {
    return {
		mallData:[],
      height: 900,
      tableData: [],
      loading: false,
      orgunid: "",
      addressunid: "",
      addvdialog: false,
      state:'add',
      editData: "",
      defaultProps: {
        children: "childs",
        label: "org_name"
      },
      orgData: [],
      search:{
		  accountId:localStorage.getItem('accountId'),
		  mallId:'',
        serialnum_like:''
      },
      page: {
        offset: 0,
        limit: 18,
        total: 0,
        currentPage: 1
      }
    };
  },
  methods: {
	  initMallData(){
	      this.axios.get(this.API.url + "/malls",{
	        params:{
	          accountId:this.search.accountId,
	          status:1
	        }
	      }).then((response)=> {
	         this.mallData = response.data.data;
	         if(response.data.data.length>0){
	           this.search.mallId=response.data.data[0].id
	         }
			this.getvchanlist();
	      });
	  },
      handleCurrentChange(val) {
        this.page.offset = (val - 1) * this.page.limit;
        this.getvchanlist();
      },
    closedialog(state) {
      this.addvdialog = false;
      if (state == 1) {
        this.getOrgData();
        this.getvchanlist();
      }
    },
    addvchan(){
      this.addvdialog = true;
      this.state = 'add';
    },
    showent(val){
      let result = '';
      if(val.vchan_prop){
        if(val.vchan_prop.ent_prop == 1){
           result = "入口"
        }
        if(val.vchan_prop.ent_prop == 2){
           result = "出口"
        }
      }
      return result
    },
    editvchan(index, row) {
      this.editData = row;
      // this.$refs.vchan.editvchan();
      this.addvdialog = true;
      this.state = 'edit';
    },
    deletevchan(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .delete(this.API.org.getvchan, {
              data: {
                id: row.id
              }
            })
            .then(response => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getvchanlist();
              this.getOrgData();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getvchanlist() {
      this.axios
        .get(this.API.url+"/devices/filter", {
          params:{
			  accountId: this.search.accountId,
			  mallId: this.search.mallId,
			  status_arr: '1,0',
			  serialnum_like: `%${this.search.serialnum_like}%`,
			  page: this.page.currentPage,
			  pageSize: this.page.limit,
			  sortName: 'sort_ip',
			  sortOrder: 'ASC'
        }
        })
        .then(response => {
          this.tableData = response.data.data.list;
          this.page.total = response.data.data.total;
        });
    },
    buildTree(data){
      if(data) {
        data.forEach(el => {
          if(el.org_type == 'vchan'){
            el.org_name = el.vchan_name
          }
          if(el.childs){
            this.buildTree(el.childs);
          }
        });
      }
      return data
    },
    renderContent(h, { node, data, store }){
        var html = <span>{data.org_name}</span>;
        if (data.org_type == "address") {
          html = <span class="">{data.org_name}</span>;
        }
        if (data.org_type == "vchan") {
          if(data.vchan_prop.is_dome){
           html = (
             <span>
              <i class="el-icon-plate-shebeileiqiuji"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
            </span>);
          } else {
          html = (
             <span>
              <i class="el-icon-plate-qiangji"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
            </span>);
          }
        }
        if (data.org_type == "horn") {
          html = (
             <span>
              <i class="el-icon-fa-volume-up fz20"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
            </span>);
        }
        return (
          <span>
            <span>{html}</span>
          </span>
        );
      },
    getOrgData() {
      this.axios
        .get(this.API.org.getorgtree, {
          params: {
            "vchan_source":'internal',
            "vchan_type":'vchan'
          },
          hedader: {
            authorization: localStorage.getItem("atoken")
          }
        })
        .then(response => {
          this.orgData = this.buildTree(response.data);
        });
    },
    handleNodeClick(){
    },
    searchVchan() {
      this.getvchanlist();
    }
  },
  computed: {
    ...mapState(["initinfo"])
  },
  components: {
    addvchan
  },
  created() {
    this.getOrgData();
	this.initMallData();
  }
};
</script>

<style scoped lang="stylus">
.orgbox{
  display flex
}
.left-box {
  margin: 5px;
  width: 230px;
  height: calc(100vh - 130px);
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  border-radius: 5px;
  overflow: hidden;
  font-size 14px
}
.org-right-box {
  width: calc(100vw - 220px);
  margin: 5px;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
}
</style>