smart-grp-nof-web/src/views/demo/equipmentManage/equipment/index.vue

<template>
  <div>
    <d2-container>
          <div class="nav">当前所在位置:<a href="#/index">首页</a>>设备管理>设备</div>

      <!-- <template slot="header">首页/数据查询</template> -->
      <div class="main">
        <div class="zt_right">
          <!-- <template slot="header">首页/数据查询</template> -->
          <div class="right_main">
            <!-- <div class="right_title">
              <i
                class="fa fa-file-text"
                aria-hidden="true"
                style="padding-right: 5px"
              ></i>
              产品
            </div> -->
            <div class="right_title">
              <span><i class="fa fa-wrench"></i>&emsp;设备</span> 
            </div>
            <div class="right_table">
              <div class="flex-between">
                <el-form
                  :inline="true"
                  :model="formInline"
                  class="demo-form-inline"
                  id="formLabel"
                >
                  <!-- <el-form-item label="组织名称:">
                    <el-select size="mini" v-model="formInline.orgCode" placeholder="请选择" >
                      <el-option v-for="item in ckLists" :key="item.id" :label="item.orgName" :value="item.orgCode">
                      </el-option>
                    </el-select>
                  </el-form-item> -->
                  <el-form-item label="产品名称:">
                    <el-select size="mini" v-model="formInline.proCode" placeholder="请选择" >
                      <el-option v-for="item in proLists" :key="item.id" :label="item.proName" :value="item.proCode">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="设备名称:">
                    <!-- <el-input size="mini" v-model="formInline.eqName" placeholder="请输入"></el-input> -->
                  <el-select
                    size="mini"
                    v-model="formInline.eqCode"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableData1"
                      :key="item.id"
                      :label="item.eqName"
                      :value="item.eqCode"
                    >
                    </el-option>
                  </el-select>
                  </el-form-item>
                  <el-form-item label="设备标签:">
                    <el-select size="mini" v-model="formInline.labelCode" placeholder="请选择" >
                      <el-option v-for="item in tagLists" :key="item.id" :label="item.labelName" :value="item.labelCode">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                   size="mini"
                      type="primary"
                      icon="el-icon-search"
                      @click="search"
                      >查询</el-button
                    >
                  </el-form-item>

                  <el-form-item>
                    <el-button
                 size="mini"
                      type="primary"
                      icon="el-icon-refresh-left"
                      @click="reset"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-form>
                <div style="margin-top:-10px;margin-bottom:10px">
                  <el-button type="primary" @click="goTag" size="mini"
                    >设备标签</el-button
                  >
                  <el-button
                 size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="dialogTitle='新建设备';$refs.addDialog.dialogFormVisible = true;$refs.addDialog.ckList()"
                    >新建设备</el-button
                  >
                </div>
              </div>
              <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%"
              >
                <el-table-column
                  align="center"
                  label="序号"
                  type="index"
                  width="100px"
                  :index="indexMethod"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="eqCode"
                  label="设备ID"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="eqName"
                  label="设备名称"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="proName"
                  label="所属产品名称"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="phoneO" label="设备数量" align="center">
                </el-table-column>

                <el-table-column
                  prop="orgName"
                  label="所属组织名称"
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop="labelName"
                  label="设备标签"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="eqStatus"
                  label="状态"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button
                      class="online"
                      v-if="scope.row.eqStatus==1"
                      type="primary"
                      size="mini"
                      plain
                      >在线</el-button
                    >
                    <el-button class="downline" v-if="scope.row.eqStatus==0" type="danger" plain size="mini">离线</el-button>
                    <!-- <el-button @click="delecheck( scope.$index, scope.row)" type="detailbtn" class="fa fa-info-circle" size="mini">查看</el-button> -->
                  </template>
                </el-table-column>

                <el-table-column
                  prop="registerTime"
                  label="注册时间"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="lastOnlineTime"
                  label="最后上线时间"
                  align="center"
                >
                </el-table-column>

                <el-table-column label="操作" width="160" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      plain
                      class="editBtn"
                      @click="goDetail(scope.row)"
                      >查看</el-button
                    >
                    <!-- <el-button type="warning" plain size="mini" @click="edit(scope.row)"
                      >编辑</el-button
                    > -->
                    <el-button type="danger" plain size="mini" @click="del(scope.row)"
                      >删除</el-button
                    >
                    <!-- <el-button @click="delecheck( scope.$index, scope.row)" type="detailbtn" class="fa fa-info-circle" size="mini">查看</el-button> -->
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <addDialog :dialogTitle="dialogTitle" ref="addDialog"/>
    </d2-container>
  </div>
</template>
<script>
import addDialog from "../compontents/addDialog.vue";

import api from "@/api";
// 1  异常点   2  断开
export default {
  name: "product",
  components: { addDialog },
  data() {
    return {
            defaultProps: {
        children: "children",
        label: "productCategoryName",
      },
            ckLists:[],
            typeLists:[],
      proLists:[],
      tagLists:[],
      addForm: {},
      dialogFormVisible: false,
      dialogTitle: "",
      //头部查询条件
      formInline: {
      },

      //表格字段
      tableData: [{}],
      tableData1: [],
      //分页
      pagination: {
        // 每页显示的条数
        pageSize: 10,
        // 当前页
        curPage: 1,
        // 总数
        total: 20,
      },
      rules: {
        id: [{ required: true, message: "请输入产品ID", trigger: "blur" }],
        name: [{ required: true, message: "请选择产品名称", trigger: "blur" }],
        region: [
          { required: true, message: "请选择产品分类", trigger: "blur" },
        ],
      },
    };
  },
    created(){
    this.ckList()
  },
  methods: {
    //编辑
    edit(row) {
      this.$refs.addDialog.dialogFormVisible = true;
      this.dialogTitle = "编辑设备";
      this.editRow = row;
      this.$refs.addDialog.ckList()
      this.$refs.addDialog.getEditRow(row);
    },
    ckList() {
      var data = {
        storeTypeCode: 300002,
      };

      api
        .ckList()
        .then((res) => {
          if (res.code == 200) {
            this.ckLists = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
      api
        .productCategoryList(localStorage.getItem("orgCode"))
        .then((res) => {
          if (res.code == 200) {
            this.typeLists = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });

      api
        .productList({ curPage: 1, pageSize: 99999,condition: JSON.stringify({org_code:localStorage.getItem("orgCode")}) })
        .then((res) => {
          if (res.code == 200) {
            this.proLists = res.data.records;
          }
        })
        .catch((err) => {
          console.log(err);
        });

      api
        .equipmentTagList({curPage:1,pageSize:99999})
        .then((res) => {
          if (res.code == 200) {
            this.tagLists = res.data.records;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleNodeClick(data) {
      console.log(data);
      this.$set(this.formInline,'proCategory',data.productCategoryName)
      this.$set(this.formInline,'label',data.productCategoryName)
      console.log(this.formInline);
      // 使 input 失去焦点，并隐藏下拉框
      this.$refs.selectTree.blur();
    },
    //删除
    del(row){
        this.$confirm('确认进行删除操作吗?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        api.equipmentDel(row.id).then(res=>{
          if(res.code==200){
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getList()
          }else{
            this.$message({
              type: "error",
              message: res.msg,
            });
          }

        })
        })
    },
    //查看
    goDetail(row) {
      this.$router.push({ path: "equipmentInfo",query:{id:row.id} });
    },
    //跳转产品分类
    goTag() {
      this.$router.push({ path: "equipmentTag" });
    },
    //图标上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === 'image/jpeg';
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!');
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!');
    //   }
    //   return isJPG && isLt2M;
    // },
    //新建产品提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    search() {
      this.getList()

    },
    reset() {
      this.pagination.curPage=1;
      this.pagination.pageSize=10;
      this.formInline={}
      this.getList()
    },

    //获取列表数据
    getList() {
      var condition = this.formInline;
      condition.org_code=localStorage.getItem("orgCode");
      condition = JSON.stringify(condition);
      var data = {
        pageIndex: this.pagination.curPage,
        pageSize: this.pagination.pageSize,
        condition: condition,
      };
      api.equipmentList(data)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.records;
            this.pagination.pageSize = res.data.size;
            this.pagination.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });

    },

    //表格序号
    indexMethod(index) {
      return (
        (this.pagination.curPage - 1) * this.pagination.pageSize + index + 1
      );
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.curPage = val;
      this.getList();
    },
  },
  mounted() {
    this.getList();

      api.equipmentList({ pageIndex: 1, pageSize: 99999,condition: JSON.stringify({org_code:localStorage.getItem("orgCode")}) })
        .then((res) => {
          if (res.code == 200) {
            this.tableData1 = res.data.records;
          }
        })
        .catch((err) => {
          console.log(err);
        });
  },
};
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  display: flex;

  .zt_right {
    width: 100%;
border: 1px solid #DEDEDE;
border-radius: 6px;
background: #fff;
    // margin-left: 20px;
    // width: calc(100% - 250px);
    .right_title{
      font-weight: bold;
      font-size: 16px;
      border-bottom:1px solid #ebeef5;
      background-color: rgba(233, 244, 243, 0.5);
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      color: #008775;
      border-bottom: 1px solid rgba(1, 164, 143, 0.3);
      padding-left: 0;
      span{
        padding: 10px;
        padding-bottom: 9px;
        border-bottom: 2px solid #01a48f;

      }
    }

  }
}
     .nav {
      padding: 10px 0 10px 10px;
      margin-bottom: 20px;
      // color: #fff;

      font-size: 14px;

      background: #FFFFFF;
      border: 1px solid #DEDEDE;
      cursor: pointer;
    }
.float-left {
  float: left;
}
.float-right {
  float: right;
}
#dialogStyle .el-select {
  width: 100%;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
::v-deep .online:hover{
  background-color: rgba(7, 115, 94, 0.07) !important;
  color:#008775 !important
}
::v-deep .downline:hover{
    color: #F56C6C !important;
    background: #fef0f0 !important;
    border-color: #fbc4c4 !important
}
</style>