303 lines
8.5 KiB
Vue
303 lines
8.5 KiB
Vue
<!--电位展示图表-->
|
||
<template>
|
||
<div>
|
||
<el-dialog
|
||
v-loading="loading"
|
||
:close-on-click-modal="false"
|
||
:visible.sync="show"
|
||
append-to-body
|
||
class="ems-dialog"
|
||
destroy-on-close
|
||
lock-scroll
|
||
show-close
|
||
:title="dataType === 'point' ? '点位清单' : '报警点位'"
|
||
width="950px"
|
||
>
|
||
<el-form :inline="true" label-width="100px">
|
||
<el-form-item label="点位名称">
|
||
<el-input
|
||
v-model="form.dataPointName"
|
||
clearable
|
||
placeholder="请输入点位名称"
|
||
style="width: 150px"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="点位">
|
||
<el-input
|
||
v-model="form.dataPoint"
|
||
clearable
|
||
placeholder="请输入点位"
|
||
style="width: 150px"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="modbus ip">-->
|
||
<!-- <el-input-->
|
||
<!-- v-model="form.ipAddress"-->
|
||
<!-- clearable-->
|
||
<!-- placeholder="请输入ip"-->
|
||
<!-- style="width: 150px"-->
|
||
<!-- ></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
<br>
|
||
<el-form-item label="最小值">
|
||
<el-input
|
||
v-model="form.lower"
|
||
clearable
|
||
placeholder="请输入最小值"
|
||
style="width: 150px"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="最大值">
|
||
<el-input
|
||
v-model="form.upper"
|
||
clearable
|
||
placeholder="请输入最大值"
|
||
style="width: 150px"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="modbus 端口">-->
|
||
<!-- <el-input-->
|
||
<!-- v-model="form.ipPort"-->
|
||
<!-- clearable-->
|
||
<!-- placeholder="请输入端口"-->
|
||
<!-- style="width: 150px"-->
|
||
<!-- ></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
<el-form-item style="margin-left: 20px">
|
||
<el-button type="primary" @click="search">搜索</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-table
|
||
:data="tableData"
|
||
class="common-table"
|
||
max-height="400px"
|
||
stripe
|
||
style="width: 100%"
|
||
:default-sort="defaultSort"
|
||
@sort-change="handleSortChange"
|
||
>
|
||
<el-table-column label="数据点位" prop="dataPoint"></el-table-column>
|
||
<el-table-column
|
||
label="数据点位名称"
|
||
prop="pointName"
|
||
></el-table-column>
|
||
<!-- <el-table-column label="modbus地址">-->
|
||
<!-- <template slot-scope="scope">-->
|
||
<!-- <span>{{-->
|
||
<!-- `${scope.row.ipAddress || ""} ${scope.row.ipPort || ""}`-->
|
||
<!-- }}</span>-->
|
||
<!-- </template>-->
|
||
<!-- </el-table-column>-->
|
||
<el-table-column label="寄存器地址" prop="寄存器地址"></el-table-column>
|
||
<el-table-column
|
||
label="最新值"
|
||
prop="pointValue"
|
||
align="right"
|
||
sortable="custom"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span class="pointer" @click="showChart(scope.row)">{{
|
||
scope.row.pointValue
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="单位" prop="dataUnit"></el-table-column>
|
||
<el-table-column
|
||
label="更新时间"
|
||
min-width="160px"
|
||
prop="updateTime"
|
||
sortable="custom"
|
||
>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
v-show="tableData.length > 0"
|
||
:current-page="pageNum"
|
||
:page-size="pageSize"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
:pager-count="5"
|
||
:total="totalSize"
|
||
background
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
small
|
||
style="margin-top: 15px; text-align: center"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
>
|
||
</el-pagination>
|
||
</el-dialog>
|
||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {getDevicePointList} from "@/api/ems/site";
|
||
import pointChart from "@/views/ems/dzjk/sbjk/PointChart.vue";
|
||
|
||
export default {
|
||
components: {pointChart},
|
||
watch: {
|
||
show(val) {
|
||
if (!val) {
|
||
this.tableData = [];
|
||
this.deviceId = "";
|
||
this.parentId = "";
|
||
this.siteId = "";
|
||
this.pageSize = 10;
|
||
this.pageNum = 1;
|
||
this.totalSize = 0;
|
||
this.dataType = '';
|
||
this.form = {
|
||
sortMethod: "desc", //升序不传或者asc、降序desc）
|
||
sortData: this.defaultSort.prop,
|
||
dataPointName: "", //点位名称
|
||
dataPoint: "", //点位名称
|
||
lower: "", //
|
||
upper: "", //
|
||
// ipAddress: "",
|
||
// ipPort: "",
|
||
};
|
||
this.loading = false;
|
||
}
|
||
},
|
||
},
|
||
computed: {
|
||
isDtdc() {
|
||
return this.deviceCategory === "BATTERY";
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
// 默认排序
|
||
defaultSort: {prop: "updateTime", order: "descending"},
|
||
show: false,
|
||
loading: false,
|
||
dataType: '',//展示的数据类型 point点位/alarmPoint报警点位
|
||
form: {
|
||
sortData: "updateTime", //最新值升序不传或者asc、降序desc）
|
||
sortMethod: "desc", //升序不传或者asc、降序desc）
|
||
dataPointName: "", //点位名称
|
||
dataPoint: "", //点位名称
|
||
lower: "", //
|
||
upper: "", //
|
||
// ipAddress: "",
|
||
// ipPort: "",
|
||
},
|
||
deviceCategory: "",
|
||
deviceId: "",
|
||
parentId: "",
|
||
siteId: "",
|
||
tableData: [],
|
||
pageSize: 10, //分页栏当前每个数据总数
|
||
pageNum: 1, //分页栏当前页数
|
||
totalSize: 0, //table表格数据总数
|
||
};
|
||
},
|
||
methods: {
|
||
showChart({pointName}) {
|
||
if (pointName) {
|
||
const {deviceCategory, deviceId} = this;
|
||
if (this.isDtdc)
|
||
this.$refs.pointChart.showChart({
|
||
pointName,
|
||
deviceCategory,
|
||
deviceId: this.parentId,
|
||
child: [deviceId],
|
||
});
|
||
else
|
||
this.$refs.pointChart.showChart({
|
||
pointName,
|
||
deviceCategory,
|
||
deviceId,
|
||
});
|
||
}
|
||
},
|
||
handleSortChange(column) {
|
||
this.form.sortData = column.prop;
|
||
this.form.sortMethod = column.order === "descending" ? "desc" : "asc";
|
||
console.log("切换排序方式", column, this.form);
|
||
this.getData()
|
||
},
|
||
search() {
|
||
this.pageNum = 1;
|
||
this.getData()
|
||
},
|
||
// 分页
|
||
handleSizeChange(val) {
|
||
this.pageSize = val;
|
||
this.$nextTick(() => {
|
||
this.getData()
|
||
});
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.pageNum = val;
|
||
this.$nextTick(() => {
|
||
this.getData()
|
||
});
|
||
},
|
||
showTable({deviceCategory, siteId, deviceId, parentId = ""}, dataType) {
|
||
this.dataType = dataType;
|
||
this.deviceCategory = deviceCategory;
|
||
this.siteId = siteId;
|
||
this.deviceId = deviceId;
|
||
this.parentId = deviceCategory === "BATTERY" ? parentId : ""; //只有单体电池需要这个值
|
||
this.show = true;
|
||
this.getData()
|
||
},
|
||
getData() {
|
||
const {
|
||
siteId,
|
||
deviceId,
|
||
deviceCategory,
|
||
parentId,
|
||
pageNum,
|
||
pageSize,
|
||
form: {
|
||
sortData,
|
||
sortMethod,
|
||
dataPointName,
|
||
dataPoint,
|
||
lower,
|
||
upper,
|
||
// ipAddress,
|
||
// ipPort,
|
||
},
|
||
} = this;
|
||
const params = {
|
||
siteId,
|
||
deviceId,
|
||
deviceCategory,
|
||
parentId,
|
||
pageNum,
|
||
pageSize,
|
||
sortData,
|
||
sortMethod,
|
||
dataPointName,
|
||
dataPoint,
|
||
lower,
|
||
upper,
|
||
// ipAddress: '',
|
||
// ipPort: '',
|
||
}
|
||
params.isAlarm = this.dataType === 'point' ? 0 : 1
|
||
this.loading = true;
|
||
getDevicePointList(params)
|
||
.then((response) => {
|
||
this.tableData = response?.rows || [];
|
||
this.totalSize = response?.total || 0;
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
::v-deep {
|
||
.card-title .el-radio {
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
</style>
|