cac添加监测设备

master
fanluyan 1 year ago
parent 7fa87a1df7
commit 7fb6e3f0e1

@ -87,6 +87,14 @@ const routes = [
title: "监测设备类型",
},
},
{
path: "/equipment/monitoring",
component: () => import("../views/equipment/monitoring/index.vue"),
name: "monitoring",
meta: {
title: "监测设备管理",
},
},
{
path: "/equipment/unitController",
component: () =>

@ -1,8 +1,8 @@
import request from "../request";
//获取登录
//获取新的树结构
export function getTreeApi(data) {
return request({
url: "/sensor/getTree",
url: "/nsensor/getTree",
method: "get",
data,
});
@ -10,7 +10,7 @@ export function getTreeApi(data) {
//获取装置总数图表
export function getDetailApi(data) {
return request({
url: "/sensor/detail",
url: "/nsensor/detail",
method: "get",
params: data,
headers: {
@ -18,10 +18,29 @@ export function getDetailApi(data) {
},
});
}
//获取树结构
// export function getTreeApi(data) {
// return request({
// url: "/sensor/getTree",
// method: "get",
// data,
// });
// }
//获取装置总数图表
// export function getDetailApi(data) {
// return request({
// url: "/sensor/detail",
// method: "get",
// params: data,
// headers: {
// "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
// },
// });
// }
//导出;
export function getexportApi(data) {
return request({
url: "/sensor/export",
url: "/nsensor/export",
method: "get",
params: data,
});
@ -292,7 +311,7 @@ export function sblxListAllApi(data) {
//新增
export function modevtypeAddApi(data) {
return request({
url: "/modevtype/add",
url: "/nsensor/add",
method: "post",
data,
});
@ -301,7 +320,7 @@ export function modevtypeAddApi(data) {
//修改更新
export function modevtypeUpdateApi(data) {
return request({
url: "/modevtype/update",
url: "/nsensor/update",
method: "post",
data,
});
@ -309,7 +328,7 @@ export function modevtypeUpdateApi(data) {
//删除
export function modevtypeDeleteApi(data) {
return request({
url: "/modevtype/delete",
url: "/nsensor/delete",
method: "post",
params: data,
headers: {
@ -330,10 +349,21 @@ export function modevtypeListAllApi(data) {
}
//监测设备相关接口
//监测设备相关接口
export function monitoringListAllApi(data) {
return request({
url: "/nsensor/listAll",
method: "get",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//新增
export function modevAddApi(data) {
return request({
url: "/modev/add",
url: "/nsensor/add",
method: "post",
data,
});
@ -342,7 +372,7 @@ export function modevAddApi(data) {
//修改更新
export function modevUpdateApi(data) {
return request({
url: "/modev/update",
url: "/nsensor/update",
method: "post",
data,
});
@ -350,7 +380,7 @@ export function modevUpdateApi(data) {
//删除
export function modevDeleteApi(data) {
return request({
url: "/modev/delete",
url: "/nsensor/delete",
method: "post",
params: data,
headers: {
@ -500,3 +530,43 @@ export function paramclearAllApi(data) {
data,
});
}
//监测设备相关接口
export function monitoringListApi(data) {
return request({
url: "/nsensor/list",
method: "get",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//导入CAC
export function cacUploadApi(data) {
return request({
url: "/nsensor/importCac",
method: "post",
params: data,
headers: {
"Content-Type": "multipart/form-data", // set the content type to multipart/form-data
},
});
}
//查询树干
export function getTrunkApi(data) {
return request({
url: "/nsensor/getTrunk",
method: "get",
data,
});
}
//批量更新
export function batchUpdateApi(data) {
return request({
url: "/nsensor/batchUpdate",
method: "post",
data,
});
}

@ -38,18 +38,18 @@ export default {
for (var i = 0; i < pointsData.length; i++) {
console.log(pointsData[i]);
console.log(pointsData[i].name);
console.log(pointsData[i].fieldDesc);
seriseData.push({
name: pointsData[i].name,
name: pointsData[i].fieldDesc,
type: "line",
yAxisIndex: i,
data: pointsData[i].data,
smooth: true,
});
legendData.push(pointsData[i].name);
legendData.push(pointsData[i].fieldDesc);
console.log(legendData);
yAxisData.push({
name: pointsData[i].name,
name: pointsData[i].fieldDesc,
type: "value",
position: i % 2 == 0 ? "left" : "right",
offset: i + 1 <= 2 ? 0 : (Math.ceil((i + 1) / 2) - 1) * 40,

@ -18,13 +18,13 @@
:props="defaultProps"
node-key="id"
:filter-node-method="filterNode"
:default-expanded-keys="defaultExpandedKeys"
:default-expand-all="true"
highlight-current
:current-node-key="currentNodekey"
:expand-on-click-node="true"
@node-click="handleNodeClick"
>
<template class="custom-tree-node" slot-scope="{ node, data }">
<!-- <template class="custom-tree-node" slot-scope="{ node, data }">
<span v-if="node.level === 1">
<span>{{ node.label }} </span>
</span>
@ -32,6 +32,16 @@
<span class="el-icon-document" style="margin-right: 6px"> </span>
<span :title="node.label">{{ node.label }} </span>
</span>
</template> -->
<template class="custom-tree-node" slot-scope="{ node, data }">
<!-- <span>{{ data.name || data.mc }}</span> -->
<span v-if="data.mc">
<span>{{ data.mc }} </span>
</span>
<span v-else-if="data.name">
<span class="el-icon-document" style="margin-right: 6px"> </span>
<span :title="data.name">{{ data.name }} </span>
</span>
</template>
</el-tree>
</div>
@ -83,9 +93,22 @@
<el-tab-pane label="数据" name="dataTab">
<div class="dataTabHead">
<h3>{{ crrrentName }}</h3>
<el-button type="primary" class="export" @click="handleExport"
>导出</el-button
>
<div class="exportbtn">
<el-button
type="primary"
class="export"
@click="handleExport"
:disabled="tableData.length == 0"
>导出全部</el-button
>
<el-button
type="primary"
class="export"
@click="handleCurrentExport"
:disabled="tableData.length == 0"
>导出当前</el-button
>
</div>
</div>
<div class="tableBox" v-loading="tableLoading">
<div class="leftTable">
@ -122,7 +145,7 @@
<el-table-column
v-for="(column, index) in columns"
:key="index"
:label="column.name"
:label="column.fieldDesc"
:prop="column.field"
></el-table-column>
</el-table>
@ -226,17 +249,19 @@ export default {
checkedList(valArr) {
console.log("我是监听的", valArr);
this.columns = this.formTheadOptions.filter(
(i) => valArr.indexOf(i.name) >= 0
(i) => valArr.indexOf(i.fieldDesc) >= 0
);
this.key = this.key + 1; // table
},
},
created() {
const thirtyDaysAgo = new Date();
this.$set(
this.formdata,
"starttime",
new Date(new Date().toLocaleDateString())
new Date(thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30))
);
console.log(this.formdata.starttime);
const currentDate = new Date(); //
currentDate.setHours(23); // 23
currentDate.setMinutes(59); // 59
@ -264,13 +289,21 @@ export default {
}
},
handleNodeClick(data, node) {
console.log(data);
if (data.children?.length) {
console.log(data, node);
console.log(this.currentNodeKey);
if (data.hasOwnProperty("children")) {
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodeKey);
});
return;
}
// if (data.children?.length) {
// this.$nextTick(() => {
// this.$refs.tree.setCurrentKey(this.currentNodeKey);
// });
// return;
// }
this.currentNodeKey = data.id;
this.crrrentName = data.name;
this.currentId = data.id;
@ -287,9 +320,14 @@ export default {
//node.children = response.data.content; // children
this.treeData = response.data; // children
console.log(this.treeData[0]);
this.defaultExpandedKeys = [this.treeData[0].id];
this.currentNodekey = this.treeData[0].children[0].id;
this.currentNodeData = this.treeData[0].children[0];
this.defaultExpandedKeys = [
this.treeData[0].children[0].children[0].id,
];
this.currentNodekey =
this.treeData[0].children[0].children[0].children[0].id;
console.log("我是选中的id", this.currentNodekey);
this.currentNodeData =
this.treeData[0].children[0].children[0].children[0];
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); //
this.handleNodeClick(this.currentNodeData);
@ -397,7 +435,7 @@ export default {
//checkbox
this.optionList = res.data.points.map((i) => {
console.log(i);
return i.name;
return i.fieldDesc;
});
console.log(this.optionList);
this.checkedList = this.optionList;
@ -457,7 +495,7 @@ export default {
"YYYY-MM-DD HH:mm:ss"
);
window.location.href =
"/cac-api/sensor/export?id=" +
"/cac-api/nsensor/export?id=" +
this.currentId +
"&startTime=" +
this.formdata.starttime +
@ -477,6 +515,26 @@ export default {
// console.log(err); //
// });
},
//
handleCurrentExport() {
this.formdata.starttime = this.$moment(this.formdata.starttime).format(
"YYYY-MM-DD HH:mm:ss"
);
this.formdata.endtime = this.$moment(this.formdata.endtime).format(
"YYYY-MM-DD HH:mm:ss"
);
window.location.href =
"/cac-api/nsensor/export?id=" +
this.currentId +
"&startTime=" +
this.formdata.starttime +
"&endTime=" +
this.formdata.endtime +
"&pageNum=" +
this.page +
"&pageSizee=" +
this.pageSize;
},
//
handleCurrentChange(val) {
this.page = val;
@ -727,6 +785,9 @@ export default {
color: #333;
font-weight: normal;
}
.exportbtn {
display: flex;
}
}
.tableBox {
// padding: 0 12px;

@ -44,6 +44,10 @@ export default {
name: "监测设备类型管理",
path: "/equipment/modevtype",
},
{
name: "监测设备管理",
path: "/equipment/monitoring",
},
{
name: "计量单位管理",
path: "/equipment/unitController",

@ -14,19 +14,33 @@
:rules="rules"
:model="formInfo"
>
<el-form-item label="设备名称:" prop="name">
<el-form-item label="主设备名称:" prop="zsbName">
<el-input v-model="formInfo.zsbName"></el-input>
</el-form-item>
<el-form-item label="名称:" prop="name">
<el-input v-model="formInfo.name"></el-input>
</el-form-item>
<el-form-item label="设备类型:">
<el-select v-model="formInfo.modevtid">
<el-form-item label="相位:" prop="phase">
<el-input v-model="formInfo.phase"></el-input>
</el-form-item>
<el-form-item label="选择表名:">
<el-select v-model="formInfo.tableName" @change="changetablename">
<el-option
v-for="item in modevtypeOptions"
:key="item.id"
:label="item.mc"
:value="item.id"
></el-option>
v-for="item in tableOptions"
:key="item.name"
:label="item.name"
:value="item.name"
>
{{ item.name
}}<span v-if="item.comment != '' && item.comment != null"
>({{ item.comment }})</span
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="传感器代码:" prop="sensorCode">
<el-input v-model="formInfo.sensorCode"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="hide"> </el-button>
@ -36,24 +50,23 @@
</div>
</template>
<script>
import {
modevAddApi,
modevUpdateApi,
modevtypeListAllApi,
} from "@/utils/api/index";
import { modevAddApi, modevUpdateApi, tableListApi } from "@/utils/api/index";
export default {
props: ["title"],
data() {
return {
jcsbDialogshow: false,
formInfo: {
zsbName: "",
name: "",
modevtid: "",
phase: "",
tableName: "",
sensorCode: "",
},
rules: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
},
modevtypeOptions: [],
tableOptions: [],
zsbInfo: "",
};
},
@ -62,6 +75,7 @@ export default {
this.$nextTick(() => {
this.zsbInfo = JSON.parse(localStorage.getItem("zsbInfo"));
console.log(this.zsbInfo);
this.formInfo.zsbName = this.zsbInfo.mc;
});
},
watch: {},
@ -76,7 +90,7 @@ export default {
if (valid) {
if (this.title == "添加监测设备") {
console.log(this.formInfo);
this.$set(this.formInfo, "zsbid", this.zsbInfo.id);
this.$set(this.formInfo, "zsbId", this.zsbInfo.id);
modevAddApi(this.formInfo)
.then((res) => {
if (res.success) {
@ -92,7 +106,7 @@ export default {
})
.catch((err) => {});
} else {
this.$set(this.formInfo, "zsbid", this.zsbInfo.id);
this.$set(this.formInfo, "zsbId", this.zsbInfo.id);
console.log(this.formInfo);
modevUpdateApi(this.formInfo)
.then((res) => {
@ -115,18 +129,20 @@ export default {
}
});
},
changetablename(val) {
console.log(val);
this.formInfo.tableName = val;
},
//
getmodevtypeListAll() {
modevtypeListAllApi()
getTableListAll() {
tableListApi()
.then((res) => {
console.log(res);
this.modevtypeOptions = res.data;
this.tableOptions = res.data;
console.log(this.title);
if (this.title == "添加监测设备") {
console.log(this.formInfo);
this.formInfo.modevtid = this.modevtypeOptions[0].id;
this.formInfo.name = "";
this.formInfo.tableName = this.tableOptions[0].name;
}
})
.catch((err) => {
@ -136,7 +152,7 @@ export default {
display() {
this.jcsbDialogshow = true;
this.getmodevtypeListAll();
this.getTableListAll();
},
hide() {
this.jcsbDialogshow = false;

@ -22,10 +22,19 @@
style="width: 100%"
height="calc(100% - 0px)"
>
<el-table-column prop="id" label="ID"> </el-table-column>
<!-- <el-table-column prop="id" label="ID"> </el-table-column>
<el-table-column prop="name" label="名称"> </el-table-column>
<el-table-column prop="modevtname" label="类型"> </el-table-column>
<el-table-column prop="zsbname" label="主设备"> </el-table-column>
<el-table-column prop="zsbname" label="主设备"> </el-table-column> -->
<el-table-column prop="id" label="ID" width="50"> </el-table-column>
<el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
<el-table-column prop="name" label="名称"> </el-table-column>
<el-table-column prop="phase" label="相位"></el-table-column>
<el-table-column prop="tableName" label="表名"> </el-table-column>
<el-table-column
prop="sensorCode"
label="传感器代码"
></el-table-column>
<el-table-column label="操作" class-name="editClass">
<template slot-scope="scope">
<el-link
@ -51,7 +60,7 @@
</div>
</template>
<script>
import { modevDeleteApi, modevListAllApi } from "@/utils/api/index";
import { modevDeleteApi, monitoringListAllApi } from "@/utils/api/index";
import addjcsbDialog from "./components/addjcsbDialog";
export default {
components: {
@ -77,7 +86,7 @@ export default {
//
getjcsbAllList() {
this.jcsbLoading = true;
modevListAllApi({ zsbid: this.zsbInfo.id })
monitoringListAllApi({ zsbid: this.zsbInfo.id })
.then((res) => {
console.log(res);
this.jcsbTableData = res.data;

@ -0,0 +1,177 @@
<template>
<div class="monitoringAddBox">
<el-dialog
class="monitoringAddDialogBox"
:title="title"
:visible.sync="monitoringDialogshow"
width="520px"
:close-on-click-modal="false"
>
<el-form
label-position="left"
ref="formInfo"
label-width="104px"
:model="formInfo"
:rules="rules"
>
<el-form-item label="主设备名称:" prop="zsbName">
<el-input v-model="formInfo.zsbName"></el-input>
</el-form-item>
<el-form-item label="名称:" prop="name">
<el-input v-model="formInfo.name"></el-input>
</el-form-item>
<el-form-item label="相位:" prop="phase">
<el-input v-model="formInfo.phase"></el-input>
</el-form-item>
<el-form-item label="选择表名:">
<el-select v-model="formInfo.tablename" @change="changetablename">
<el-option
v-for="item in tableOptions"
:key="item.name"
:label="item.name"
:value="item.name"
>
{{ item.name
}}<span v-if="item.comment != '' && item.comment != null"
>({{ item.comment }})</span
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="传感器代码:" prop="sensorCode">
<el-input v-model="formInfo.sensorCode"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="hide"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
monitoringAddApi,
monitoringUpdateApi,
tableListApi,
} from "@/utils/api/index";
export default {
props: ["title"],
data() {
return {
monitoringDialogshow: false,
formInfo: "",
rules: {
mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
},
};
},
created() {},
mounted() {},
watch: {},
methods: {
//
getdataform(val) {
console.log(val);
if (val == null) {
this.formInfo = {
mc: "",
coordinate: "",
voltagegrade: "",
note: "",
};
} else {
this.formInfo = JSON.parse(JSON.stringify(val));
}
},
submitForm() {
this.$refs.formInfo.validate((valid) => {
if (valid) {
if (this.title == "添加监测设备") {
console.log(this.formInfo);
monitoringAddApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "添加成功",
type: "success",
});
this.hide();
this.$parent.getmonitoringAllList(); //
} else {
this.$message({
duration: 1500,
showClose: true,
message: res.errorMsg,
type: "error",
});
}
})
.catch((err) => {});
} else {
monitoringUpdateApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "修改成功",
type: "success",
});
this.hide();
this.$parent.getmonitoringAllList(); //
} else {
this.$message({
duration: 1500,
showClose: true,
message: res.errorMsg,
type: "error",
});
}
})
.catch((err) => {});
}
} else {
console.log("error submit!!");
return false;
}
});
},
display() {
this.monitoringDialogshow = true;
// if (this.title == "") {
// this.formInfo.mc = "";
// this.formInfo.coordinate = "";
// this.formInfo.voltagegrade = "";
// this.formInfo.scale = "";
// this.formInfo.note = "";
// }
},
hide() {
//this.$refs.formInfo.resetFields(); //
this.monitoringDialogshow = false;
},
},
};
</script>
<style lang="less">
.monitoringAddBox {
.monitoringAddDialogBox {
.el-input-number--small {
width: 374px;
.el-input__inner {
text-align: left;
}
}
.el-select {
width: 374px;
}
.el-input-number.is-controls-right[class*="small"] [class*="decrease"],
.el-input-number.is-controls-right[class*="small"] [class*="increase"] {
display: none;
}
}
}
</style>

@ -0,0 +1,241 @@
<template>
<div class="bindingDialog">
<el-dialog
class="bindingDialogBox"
title="绑定主设备"
:visible.sync="bindingDialogshow"
width="520px"
:close-on-click-modal="false"
>
<el-tree
ref="tree"
:data="treeData"
node-key="id"
:props="defaultProps"
:default-expand-all="true"
highlight-current
:current-node-key="currentNodekey"
:expand-on-click-node="true"
@node-click="handleNodeClick"
>
<!-- <template class="custom-tree-node" slot-scope="{ node, data }">
<span v-if="data.mc && data.children">
<span>{{ data.mc }} </span>
</span>
<span v-else>
<span>{{ data.mc }} </span>
</span>
</template> -->
<template class="custom-tree-node" slot-scope="{ node, data }">
<!-- <span>{{ data.name || data.mc }}</span> -->
<span v-if="data.mc">
<span>{{ data.mc }} </span>
</span>
<span v-else-if="data.name">
<span class="el-icon-document" style="margin-right: 6px"> </span>
<span :title="data.name">{{ data.name }} </span>
</span>
</template>
</el-tree>
<div slot="footer" class="dialog-footer">
<el-button @click="hide"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getTrunkApi, batchUpdateApi } from "@/utils/api/index";
export default {
data() {
return {
bindingDialogshow: false,
selectData: [],
treeData: [], //
defaultProps: {
children: "children",
label: "name",
},
currentNodeData: [], //
currentNodekey: "", //
currentId: "", //id
bindArr: [],
};
},
created() {},
mounted() {},
watch: {},
methods: {
handleNodeClick(data, node) {
console.log(data.children);
if (data.children) {
console.log(data.hasOwnProperty("children"));
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodeKey);
});
return;
}
//id
this.currentId = data.id;
},
async getTrunklist() {
try {
const response = await getTrunkApi(); //
if (response.data && response.data.length > 0) {
console.log(response.data);
//node.children = response.data.content; // children
this.treeData = response.data; // children
this.currentNodekey = this.treeData[0].children[0].children[0].id;
this.currentNodeData = this.treeData[0].children[0].children[0];
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); //
this.handleNodeClick(this.currentNodeData);
});
} else {
this.treeData[0].children = []; // children
}
} catch (error) {
console.error("Failed to fetch sub-nodes:", error); //
}
},
display(val) {
this.getTrunklist();
this.bindingDialogshow = true;
this.selectData = val;
console.log("弹窗", val);
},
submitForm() {
//id
console.log(this.currentId);
//id
console.log(this.selectData);
this.bindArr = this.selectData.map((item) => item.id);
console.log(this.bindArr);
this.batchFun();
},
//
batchFun() {
batchUpdateApi({
idList: this.bindArr,
zsbId: this.currentId,
})
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "添加成功",
type: "success",
});
this.hide();
this.$parent.getmonitoringAllList(); //
}
})
.catch((err) => {});
},
hide() {
this.bindingDialogshow = false;
},
},
};
</script>
<style lang="less">
.bindingDialog {
.bindingDialogBox {
.el-dialog__body {
padding: 12px !important;
max-height: 536px;
overflow: auto;
}
.el-tree {
overflow-y: auto;
/* overflow-x: hidden; */
height: calc(100% - 40px);
.el-tree-node__content {
height: 32px;
font-size: 12px;
}
.custom-tree-node {
color: #333;
overflow: hidden;
span {
display: flex;
display: inline-table;
overflow: hidden;
align-items: center;
}
.num {
color: #169e8c;
}
}
}
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
//
color: #fff;
background: #3889cf;
.custom-tree-node {
color: #fff;
//overflow: hidden;
span {
display: flex;
//overflow: hidden;
align-items: center;
.num {
color: #fff;
}
.iconfont {
//width: 30px;
display: inline-table;
}
}
}
}
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/* //有子节点 且未展开 */
.el-tree .el-icon-caret-right:before {
content: "\e783";
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
color: #333;
}
/* //有子节点 且已展开 */
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
content: "\e781";
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
color: #333;
}
/* //没有子节点 */
.el-tree .el-tree-node__expand-icon.is-leaf::before {
background: #fff;
content: "";
display: block;
width: 0px;
height: 0px;
font-size: 16px;
background-size: 16px;
}
}
}
</style>

@ -0,0 +1,320 @@
<template>
<div class="monitoring">
<div class="reportHead">
<h3>监测设备</h3>
</div>
<div class="page-body">
<!-- <el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
>添加监测设备</el-button
> -->
<div class="configHead">
<div class="upgradeBox">
<h3 class="lableBox">文件上传</h3>
<el-upload
class="upload-demo"
ref="upload"
action="/cac-api/nsensor/importCac"
:limit="1"
:file-list="fileList"
:data="reportData"
:auto-upload="false"
:on-success="handleAvatarSuccess"
@before-upload="beforeAvatarUpload"
>
<el-button slot="trigger" size="small" type="primary"
>选取文件</el-button
>
</el-upload>
</div>
<el-button
class="uploadBtn"
size="small"
type="primary"
@click="submitUpload"
>上传到服务器</el-button
>
</div>
<div class="monitoringTableBox">
<div class="bindBox" v-if="multipleSelection.length > 0">
<el-link
type="primary"
@click="handleBindClick()"
size="small"
icon="el-icon-connection"
>绑定</el-link
>
</div>
<el-table
v-loading="monitoringLoading"
:data="monitoringTableData"
stripe
border
style="width: 100%"
height="calc(100% - 0px)"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="id" label="ID" width="50"> </el-table-column>
<el-table-column prop="zsbName" label="主设备名称" width="100">
</el-table-column>
<el-table-column prop="name" label="名称"> </el-table-column>
<el-table-column
prop="phase"
label="相位"
width="50"
></el-table-column>
<el-table-column prop="tableName" label="表名" width="160">
</el-table-column>
<el-table-column prop="sensorCode" label="传感器代码" width="160">
</el-table-column>
<el-table-column label="操作" width="90" class-name="editClass">
<template slot-scope="scope">
<!-- <el-link
type="primary"
@click="handleEditClick(scope.row)"
size="small"
icon="el-icon-document"
>编辑</el-link
> -->
<el-link
type="danger"
@click="handleDeleteClick(scope.row)"
size="small"
icon="el-icon-delete"
>删除</el-link
>
</template>
</el-table-column>
</el-table>
<div class="pageNation">
<el-pagination
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:current-page="page"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper,total"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
<bindingDialog ref="bindingRef"></bindingDialog>
<!-- <addmonitoringDialog
ref="monitoringAddRef"
:title="title"
></addmonitoringDialog> -->
</div>
</template>
<script>
import { monitoringListApi, modevDeleteApi } from "@/utils/api/index";
import bindingDialog from "./components/bindingDialog";
export default {
components: {
bindingDialog,
},
data() {
return {
fileList: [], //
reportData: {},
multipleSelection: [],
monitoringLoading: false,
monitoringTableData: [],
page: 1, //
pageSize: 20, //
total: 0, //
};
},
created() {},
mounted() {
this.getmonitoringAllList();
},
watch: {},
methods: {
//
beforeAvatarUpload(file) {
console.log(this.reportData.title);
console.log(file);
},
//apk
submitUpload() {
this.$refs.upload.submit();
},
handleAvatarSuccess(res, file) {
console.log(res);
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "文件上传成功",
type: "success",
});
this.$refs.upload.clearFiles();
this.getmonitoringAllList(); //iedName
} else {
this.$message({
duration: 1500,
showClose: true,
message: res.errorMsg,
type: "error",
});
this.$refs.upload.clearFiles();
}
},
getmonitoringAllList() {
this.monitoringLoading = true;
monitoringListApi({ pageNum: this.page - 1, pageSize: this.pageSize })
.then((res) => {
console.log(res);
this.monitoringTableData = res.data.content;
this.total = res.data.totalElements; //
this.monitoringLoading = false;
})
.catch((err) => {
console.log(err); //
});
},
//
handleSelectionChange(val) {
this.multipleSelection = val;
//console.log(this.multipleSelection);
},
handleBindClick() {
//
//console.log(this.multipleSelection);
this.$refs.bindingRef.display(this.multipleSelection);
},
//
handleDeleteClick(data) {
this.$confirm("确定要删除记录吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
modevDeleteApi({ id: data.id }).then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
type: "success",
message: "删除成功",
});
this.getmonitoringAllList(); //
} else {
this.$message({
duration: 1500,
showClose: true,
type: "error",
message: res.errorMsg,
});
}
});
})
.catch(() => {});
},
//
handleCurrentChange(val) {
this.page = val;
this.monitoringTableData = [];
this.getmonitoringAllList();
},
//
handleSizeChange(val) {
this.pageSize = val;
this.monitoringTableData = [];
this.getmonitoringAllList();
},
},
};
</script>
<style lang="less">
.monitoring {
width: 100%;
height: 100%;
.page-body {
width: calc(100% - 24px);
height: calc(100% - 74px);
padding: 12px;
background: #eee;
.configHead {
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
.upgradeBox {
display: flex;
.lableBox {
font-size: 14px;
font-weight: normal;
width: 78px;
color: #333;
}
.upload-demo {
position: relative;
display: flex;
align-items: center;
flex-direction: row-reverse;
margin-right: 16px;
.el-upload-list {
width: 320px;
height: 32px;
line-height: 32px;
border: 1px solid #dcdfe6;
background: #fff;
margin-right: 12px;
border-radius: 4px;
.el-upload-list__item {
transition: none;
font-size: 14px;
color: #606266;
position: relative;
box-sizing: border-box;
border-radius: 4px;
width: 100%;
height: 32px;
line-height: 32px;
margin-top: 0px !important;
.el-icon-close {
top: 10px;
}
}
}
}
}
.uploadBtn {
}
.clearBtn {
margin-left: auto;
}
}
.monitoringTableBox {
margin-top: 8px;
height: calc(100% - 78px);
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
position: relative;
.bindBox {
position: absolute;
background: #fff;
height: 41px;
width: calc(100% - 60px);
z-index: 2;
left: 60px;
display: flex;
align-items: center;
}
//
.pageNation {
margin-top: 6px;
display: flex;
justify-content: flex-end;
}
}
}
}
</style>
Loading…
Cancel
Save