<template>
|
<div class="app-container">
|
<div class="filter-container">
|
<el-input
|
v-model="listQuery.keyword"
|
size="small"
|
placeholder="请输入编号"
|
clearable
|
class="filter-item w-200"
|
/>
|
<!-- <el-date-picker v-model="queryForm.time" type="daterange" range-separator="至" start-placeholder="开始时间" class="filter-item w-300" size="small"
|
end-placeholder="结束时间" value-format="yyyy-MM-dd" /> -->
|
|
<!-- <el-date-picker v-model="listQuery.time" type="date" placeholder="选择日期" class="filter-item w-300" size="small"
|
value-format="yyyy-MM-dd">
|
</el-date-picker> -->
|
<el-button-group class="filter-item">
|
<el-button size="small" type="primary" icon="el-icon-search" @click="search">
|
搜索
|
</el-button>
|
<el-button size="small" type="primary" icon="el-icon-refresh" @click="refresh">
|
刷新
|
</el-button>
|
<el-button
|
v-if="uadd == 'Yes'"
|
size="small"
|
type="primary"
|
icon="el-icon-plus"
|
@click="add"
|
>
|
新增
|
</el-button>
|
</el-button-group>
|
</div>
|
|
<el-table
|
v-loading="listLoading"
|
:data="list"
|
element-loading-text="Loading"
|
border
|
fit
|
height="100%"
|
class="table-container"
|
highlight-current-row
|
>
|
<el-table-column fixed label="序号" width="80">
|
<template slot-scope="scope">
|
{{ scope.row.id }}
|
</template>
|
</el-table-column>
|
<el-table-column label="编号" width="100">
|
<template slot-scope="scope">
|
{{ scope.row.tagid }}
|
</template>
|
</el-table-column>
|
<el-table-column label="名称" width="230">
|
<template slot-scope="scope">
|
{{ scope.row.name }}
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" width="70">
|
<template slot-scope="scope">
|
{{ scope.row.state == 1 ? "在线" : "离线" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="继电器" width="70">
|
<template slot-scope="scope">
|
{{ scope.row.relayone == 1 ? "开启" : "关闭" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="图标" width="80">
|
<template v-if="scope.row.state == 1" slot-scope="scope">
|
<img
|
src="../../assets/images/onguangbo.png"
|
alt=""
|
style="width: 30px; height: 30px"
|
@click="analyze(scope)"
|
/>
|
<!-- {{ scope.row.state==1?zguangbo:lguangbo }} -->
|
</template>
|
<template v-else slot-scope="scope">
|
<img
|
src="../../assets/images/offguangbo.png"
|
alt=""
|
style="width: 30px; height: 30px"
|
@click="analyze(scope)"
|
/>
|
<!-- {{ scope.row.state==1?zguangbo:lguangbo }} -->
|
</template>
|
</el-table-column>
|
<el-table-column label="安装坐标" width="350">
|
<template slot-scope="scope">
|
{{ scope.row.center }}
|
</template>
|
</el-table-column>
|
<el-table-column label="所属公司" width="170">
|
<template slot-scope="scope">
|
{{ scope.row.companyname }}
|
</template>
|
</el-table-column>
|
<el-table-column label="更新时间">
|
<template slot-scope="scope">
|
{{ scope.row.addtime }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
width="200"
|
v-if="uupdate == 'Yes' || udelete == 'Yes'"
|
>
|
<template slot-scope="scope">
|
<el-button-group>
|
<el-button
|
v-show="uupdate == 'Yes'"
|
type="primary"
|
icon="el-icon-edit"
|
size="mini"
|
@click="edit(scope)"
|
>
|
修改
|
</el-button>
|
<el-button
|
v-show="udelete == 'Yes'"
|
type="danger"
|
icon="el-icon-delete"
|
size="mini"
|
@click="del(scope)"
|
>
|
删除
|
</el-button>
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="listQuery.current"
|
:limit.sync="listQuery.size"
|
@pagination="fetchData"
|
/>
|
|
<el-dialog
|
:visible.sync="dialogVisible"
|
:title="dialogType === 'modify' ? '修改' : '新增'"
|
>
|
<el-form
|
:ref="temp"
|
:model="temp"
|
label-width="120px"
|
label-position="right"
|
:rules="rules"
|
>
|
<el-form-item label="编号" prop="tagid">
|
<el-input v-model="temp.tagid" placeholder="请输入编号" />
|
</el-form-item>
|
<el-form-item label="名称" prop="name">
|
<el-input v-model="temp.name" placeholder="请输入名称" />
|
</el-form-item>
|
<el-form-item label="安装坐标" prop="center">
|
<el-input v-model="temp.center" placeholder="请输入安装坐标" />
|
</el-form-item>
|
<el-form-item label="所属公司" prop="company">
|
<el-select
|
style="width: 100%"
|
v-model="temp.companyname"
|
filterable
|
remote
|
placeholder="请选择公司"
|
:remote-method="searchMethod"
|
:loading="searchloading"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.id"
|
:label="item.companyname"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<!-- <el-form-item label="图标" prop="icon">
|
|
|
<el-upload
|
class="avatar-uploader"
|
action="http://localhost:8083/api/addpic/"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload">
|
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
|
</el-form-item> -->
|
</el-form>
|
<div class="text-right">
|
<el-button type="danger" @click="dialogVisible = false"> 取消 </el-button>
|
<el-button type="primary" @click="submit(temp)"> 确定 </el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import zguangbo from "@/assets/images/onguangbo.png";
|
import lguangbo from "@/assets/images/offguangbo.png";
|
import axios from "axios";
|
import Pagination from "@/components/Pagination";
|
import {
|
getGuangboPage,
|
delGuangbo,
|
addorupGuangbo,
|
search,
|
searchGuangbo,
|
addSystemOperationLog,
|
addpic,
|
searchfive,
|
} from "@/api/guangbo";
|
import { deepClone } from "@/utils";
|
|
const _temp = {
|
tagid: "",
|
name: "",
|
company: "",
|
center: "",
|
// icon: '' // 新增图标属性
|
};
|
|
export default {
|
components: {
|
Pagination,
|
},
|
data() {
|
return {
|
searchloading: false,
|
options: [],
|
role: localStorage.getItem("role"),
|
uadd: "",
|
udelete: "",
|
uupdate: "",
|
total: 0,
|
list: [],
|
Guangbo: [],
|
listLoading: true,
|
listQuery: {
|
current: 1,
|
size: 20,
|
keyword: undefined,
|
},
|
uploadUrl: "http://localhost:8083/api/addpic/",
|
temp: Object.assign({}, _temp),
|
dialogVisible: false,
|
dialogType: "create",
|
loading: false,
|
rules: {
|
tagid: [{ required: true, message: "请输入编号", trigger: "blur" }],
|
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
center: [{ required: true, message: "请输入安装坐标", trigger: "change" }],
|
company: [{ required: true, message: "请选择公司", trigger: "change" }],
|
},
|
};
|
},
|
created() {
|
this.fetchData();
|
},
|
methods: {
|
// 远程搜索
|
searchMethod(query) {
|
if (query !== "") {
|
this.loading = true;
|
var params = { query: query };
|
search(params).then((response) => {
|
this.options = response.data;
|
this.loading = false;
|
});
|
} else {
|
this.options = [];
|
}
|
},
|
|
// 远程搜索
|
searchMethodfive(query) {
|
if (query !== "") {
|
this.loading = true;
|
// var params = { query: query }
|
searchfive().then((response) => {
|
this.options = response.data;
|
this.loading = false;
|
});
|
} else {
|
this.options = [];
|
}
|
},
|
|
// 搜索
|
search() {
|
this.listLoading = true;
|
searchGuangbo(this.listQuery).then((response) => {
|
if (response.data != null) {
|
this.list = response.data.records;
|
this.total = response.data.total;
|
} else {
|
this.$message({
|
message: "未搜索到数据",
|
type: "error",
|
});
|
}
|
|
this.listLoading = false;
|
});
|
},
|
refresh() {
|
this.listQuery = {
|
current: 1,
|
size: 20,
|
keyword: undefined,
|
};
|
this.fetchData();
|
},
|
// 分页数据
|
fetchData() {
|
this.uadd = localStorage.getItem("uadd") || "";
|
this.udelete = localStorage.getItem("udelete") || "";
|
this.uupdate = localStorage.getItem("uupdate") || "";
|
this.listLoading = true;
|
getGuangboPage(this.listQuery).then((response) => {
|
this.list = response.data.records;
|
this.total = response.data.total;
|
this.listLoading = false;
|
});
|
this.searchMethodfive();
|
},
|
resetTemp() {
|
this.temp = Object.assign({}, _temp);
|
},
|
add() {
|
this.resetTemp();
|
this.dialogVisible = true;
|
this.dialogType = "create";
|
// this.$nextTick(() => {
|
// this.$refs['dataForm'].clearValidate()
|
// })
|
},
|
edit(scope) {
|
this.resetTemp();
|
this.dialogVisible = true;
|
this.dialogType = "modify";
|
this.temp = deepClone(scope.row);
|
this.temp.company = scope.row.company;
|
// this.$nextTick(() => {
|
// this.$refs['dataForm'].clearValidate()
|
// })
|
},
|
changeStatus(value, scope) {
|
setTimeout(() => {
|
this.list[scope.$index].status = value;
|
this.$message({
|
message: "更新成功",
|
type: "success",
|
});
|
}, 300);
|
},
|
// 删除
|
del(scope) {
|
this.$confirm("确认删除该条数据吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
setTimeout(() => {
|
const params = { id: scope.row.id };
|
this.list.splice(scope.$index, 1);
|
delGuangbo(params).then((response) => {
|
this.temp.adminname = localStorage.getItem("username") || "";
|
const params = {
|
name: this.temp.adminname,
|
content: "删除了一个数据转发，该ip地址为：" + scope.row.ip,
|
};
|
addSystemOperationLog(params).then((response) => {});
|
this.$message({
|
message: "删除成功",
|
type: "success",
|
});
|
this.fetchData();
|
});
|
}, 300);
|
});
|
},
|
submit() {
|
|
if (this.loading) {
|
return;
|
}
|
if (this.dialogType != "modify") {
|
this.temp.company = this.temp.companyname;
|
}
|
|
this.loading = true;
|
|
this.$refs[this.temp].validate((valid) => {
|
if (valid) {
|
// addpic(this.temp).then(() => {
|
|
// })
|
|
const formData = new FormData();
|
// // 添加文件参数
|
// const fileInput = document.querySelector('input[type="file"]');
|
// const file = fileInput.files[0];
|
// formData.append('file', file);
|
// // 添加其他参数
|
// // formData.append('name', this.temp.name);
|
// // formData.append('opinion', ""); // 同样可根据实际情况设置
|
// console.log(formData);
|
|
// axios.post(this.uploadUrl, formData, {
|
// headers: {
|
// 'Content-Type':'multipart/form-data'
|
// }
|
// })
|
// .then(response => {
|
// 处理上传成功逻辑
|
|
addorupGuangbo(this.temp).then(() => {
|
if (this.temp.id == "") {
|
this.temp.adminname = localStorage.getItem("username") || "";
|
const params = {
|
name: this.temp.adminname,
|
content: "新增了一个数据转发，该ip地址为：" + this.temp.ip,
|
};
|
addSystemOperationLog(params).then((response) => {});
|
} else {
|
this.temp.adminname = localStorage.getItem("username") || "";
|
const params = {
|
name: this.temp.adminname,
|
content: "修改了一个数据转发，该ip地址为：" + this.temp.ip,
|
};
|
addSystemOperationLog(params).then((response) => {});
|
}
|
this.fetchData();
|
setTimeout(() => {
|
this.$message({
|
message: "提交成功",
|
type: "success",
|
});
|
this.dialogVisible = false;
|
this.loading = false;
|
}, 300);
|
});
|
} else {
|
this.$message({
|
message: "提交失败，请检查表单必填项是否为空",
|
type: "error",
|
});
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
|
// 上传成功回调
|
handleUploadSuccess(response, file) {
|
this.temp.icon = response.url; // 假设接口返回的响应中有图标路径
|
this.$message({
|
message: "图标上传成功",
|
type: "success",
|
});
|
},
|
// 上传失败回调
|
handleUploadError() {
|
this.$message({
|
message: "图标上传失败",
|
type: "error",
|
});
|
},
|
// 上传前校验
|
beforeUpload(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;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.el-upload {
|
border: 1px dashed #d9d9d9 !important;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
|
.el-icon-plus.avatar-uploader-icon {
|
border: 1px dashed #d9d9d9 !important;
|
border-radius: 6px;
|
font-size: 28px;
|
color: #8c939d;
|
width: 128px;
|
height: 128px;
|
line-height: 128px;
|
text-align: center;
|
}
|
}
|
|
.avatar-uploader {
|
height: 128px;
|
|
img {
|
width: 128px;
|
height: 128px;
|
}
|
}
|
</style>
|
