| | |
| | | <template> |
| | | <div class="sub-account" v-if="!isShowAdd"> |
| | | <div class="search"> |
| | | <div class="left"> |
| | | <div class="id"> |
| | | 设备名称/IP/编码 |
| | | <el-input v-model="inputText" placeholder="请输入" clearable></el-input> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="right"> |
| | | <div class="button searchBtn" @click="fetchDevicesList(1)">搜索</div> |
| | | <!-- <div class="button resetBtn" @click="reset">重置</div> --> |
| | | </div> |
| | | </div> |
| | | <div class="btns"> |
| | | <div class="button add" @click="addDevice"> |
| | | <span class="iconfont"></span> |
| | |
| | | |
| | | <div class="table-area"> |
| | | <el-table |
| | | id="multipleTable" |
| | | ref="multipleTable" |
| | | v-loading="tbLoading" |
| | | id="devTable" |
| | | ref="devTable" |
| | | :data="dataList" |
| | | :fit="true" |
| | | :default-sort="{ prop: 'createTime', order: 'descending' }" |
| | | :default-sort="{ prop: 'devCode', order: 'ascending' }" |
| | | > |
| | | <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="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="企业编码" show-overflow-tooltip> |
| | | <template slot-scope="scope"> |
| | | {{ scope.row.companyCode | fillCompanyCode(companyCodeOptions) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="state" label="状态" show-overflow-tooltip> |
| | | <template slot-scope="scope"> |
| | | <div v-if="scope.row.state == 0" class="status">离线</div> |
| | | <div v-else class="status green">在线</div> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column label="操作" align="center" width="100px"> |
| | | <template slot-scope="scope"> |
| | |
| | | <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-input v-model="ruleForm.companyCode" placeholder="请输入企业编码" style="width: 350px"> </el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="right"> |
| | |
| | | import { getDevicesList, devicesCreate, devicesUpdate, devicesDelete } from "@/api/report" |
| | | |
| | | export default { |
| | | filters: { |
| | | fillCompanyCode(key, opts) { |
| | | let obj = opts.find((t) => t.value == key) |
| | | return obj ? obj.lable : key |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | tbLoading: false, |
| | | query: {}, |
| | | inputText: "", //输入框内容 |
| | | isShowAdd: false, //是否展示新增弹窗 |
| | | dataList: [], |
| | | tip: 1, |
| | | companyCodeOptions: [ |
| | | { |
| | | value: "370300010", |
| | | lable: "370300010/汇丰" |
| | | }, |
| | | { |
| | | value: "370300450", |
| | | lable: "370300450/海益" |
| | | }, |
| | | { |
| | | value: "370300440", |
| | | lable: "370300440/金汇丰" |
| | | }, |
| | | { |
| | | value: "370300480", |
| | | lable: "370300480/中汇" |
| | | }, |
| | | { |
| | | value: "370380545", |
| | | label: "370380545/锦汇" |
| | | } |
| | | ], |
| | | ruleForm: { |
| | | //y |
| | | devName: "", |
| | |
| | | total: 0 //总数, |
| | | } |
| | | }, |
| | | created() { |
| | | this.fetchDevicesList() |
| | | async created() { |
| | | let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText } |
| | | this.query = query |
| | | let res = await getDevicesList(query) |
| | | this.dataList = res.data |
| | | this.total = res.total |
| | | }, |
| | | mounted() {}, |
| | | methods: { |
| | | async fetchDevicesList() { |
| | | let res = await getDevicesList({ pageIndex: this.page, pageSize: this.size }) |
| | | this.dataList = res.data |
| | | this.total = res.total |
| | | async fetchDevicesList(val) { |
| | | this.tbLoading = true |
| | | if (val === 1) { |
| | | let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText } |
| | | this.query = query |
| | | let res = await getDevicesList(query) |
| | | this.dataList = res.data |
| | | this.total = res.total |
| | | } else { |
| | | let res = await getDevicesList(this.query) |
| | | this.dataList = res.data |
| | | this.total = res.total |
| | | } |
| | | setTimeout(() => { |
| | | this.tbLoading = false |
| | | }, 200) |
| | | }, |
| | | delUser(row) { |
| | | console.log(row, "row") |
| | | this.$confirm("确认要删除该用户吗, 是否继续?", "提示", { |
| | | this.$confirm("确认要删除设备吗, 是否继续?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | |
| | | //分页功能 |
| | | handleSizeChange(size) { |
| | | this.size = size |
| | | this.fetchDevicesList() |
| | | this.fetchDevicesList(1) |
| | | }, |
| | | //分页功能 |
| | | refrash(page) { |
| | | this.page = page |
| | | this.fetchDevicesList() |
| | | this.fetchDevicesList(1) |
| | | }, |
| | | |
| | | addDevice() { |
| | |
| | | message: res.data |
| | | }) |
| | | this.goback() |
| | | this.fetchDevicesList() |
| | | } |
| | | }) |
| | | } else if (this.tip === 2) { |
| | |
| | | message: res.msg |
| | | }) |
| | | this.goback() |
| | | this.fetchDevicesList() |
| | | } |
| | | }) |
| | | } |
| | |
| | | goback() { |
| | | this.isShowAdd = false |
| | | }, |
| | | async editUser(row) { |
| | | editUser(row) { |
| | | this.tip = 2 |
| | | this.isShowAdd = true |
| | | this.ruleForm.devName = row.devName |