<template>
<div class="app-container" id="mainpdevice">
<el-form class="search_wrap mb-15" :model="queryParams" ref="queryForm" :inline="true">
<el-form-item label="归属分类" prop="assetTypeId">
<treeselect v-model="queryParams.assetTypeId" style="width:150px" :options="treedata" noOptionsText="暂无数据"
:normalizer="normalizer" placeholder="请选择归属分类" />
</el-form-item>
<el-form-item label="设备名称" prop="assetName">
<el-input style="width:150px" v-model="queryParams.assetName" placeholder="请输入设备名称" clearable size="small" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
<el-button size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
<el-form-item class="fr">
自动刷新<el-switch class="ml-10" @change="changelfresh($event)" v-model="freshstatus" active-color="#5B7BFA"
inactive-color="#dadde5">
</el-switch>
</el-form-item>
</el-form>
<div class="content_wrap">
<div class="mt-10 ">
<span class="table_title fl">数据查询列表</span>
</div>
<el-table class="mt-15" v-loading="listLoading" stripe :data="dataList" >
<el-table-column v-for="(column) in tableColumnList" header-align="center" :sortable="column.hasSort"
:key="column.prop + column.propName" :prop="column.prop" :label="column.propName" align="center" :fixed="column.fiexd"
:show-overflow-tooltip="true">
<template slot-scope="scope">
<div :style="{color: scope.row[scope.column.property].alarm === true ? 'red': 'black' }">
<!-- {{scope.row[scope.column.property].value}} -->
<div v-if="scope.row[scope.column.property].lable_name == 'time'">
{{scope.row[scope.column.property].value}}
</div>
<div v-else-if="scope.row[scope.column.property].lable_name == 'webAddress'">
<el-button v-if="scope.row[scope.column.property].webBoardId!=null" @click="todetail(scope.row[scope.column.property])" type="text">详情</el-button>
<a v-else target="_blank"><el-button type="text" disabled>详情</el-button></a>
</div>
<div v-else-if="scope.row[scope.column.property].lable_name == 'assetName'">
<span> {{scope.row[scope.column.property].value}}</span>
<i @click="editasset(scope.row[scope.column.property])" class="el-icon-edit-outline ml-10 pointer" style="color: #0F6EFF;font-size: 14px;"></i>
</div>
<div v-else-if="scope.row[scope.column.property].lable_name == 'switchPointValue'">
<!-- {{scope.row[scope.column.property].value}} -->
<div v-if="scope.row[scope.column.property].value=='0'||scope.row[scope.column.property].value=='1'">
<el-switch v-model="scope.row[scope.column.property].value" :active-value='"1"'
:inactive-value='"0"' active-color="#5B7BFA" inactive-color="#dadde5"
@change="changeswitch(scope.row[scope.column.property])">z
</el-switch>
</div>
<div v-else>
<span>
<el-tooltip class="item" effect="dark" content="测点传输的开关量数值异常,请检查此设备关联的开关启停测点。" placement="top">
<i class="el-icon-warning-outline" style="color: red;font-size: 28px;"></i>
</el-tooltip>
</span>
</div>
</div>
<div v-else>
{{scope.row[scope.column.property].value}}
</div>
</div>
</template>
</el-table-column>
<!-- <el-table-column prop="opeTime" label="设备名称" fixed width="80" align="center">
<template slot-scope="scope">
<span>{{ scope.row.assetName }}</span>
<i @click="editasset(scope.row)" class="el-icon-edit-outline ml-10 pointer"
style="color: #0F6EFF;font-size: 14px;"></i>
</template>
</el-table-column>
<el-table-column prop="opeUser" width="80" align="center" label="开关启停">
<template slot-scope="scope">
<div v-if="scope.row.switchPointValue=='0'||scope.row.switchPointValue=='1'">
<el-switch v-model="scope.row.switchPointValue" :active-value='"1"' :inactive-value='"0"'
active-color="#5B7BFA" inactive-color="#dadde5" @change="changeswitch(scope.row)">
</el-switch>
</div>
<div v-else>
<span>
<el-tooltip class="item" effect="dark" content="测点传输的开关量数值异常,请检查此设备关联的开关启停测点。" placement="top">
<i class="el-icon-warning-outline" style="color: red;font-size: 28px;"></i>
</el-tooltip>
</span>
</div>
</template>
</el-table-column>
<el-table-column prop="webAddress" align="center" width="80" label="组态画面">
<template slot-scope="scope">
<el-button v-if="scope.row.webBoardId!=null" @click="todetail(scope.row)" type="text">详情</el-button>
<a v-else target="_blank"><el-button type="text" disabled>详情</el-button></a>
</template>
</el-table-column> -->
<!-- <el-table-column prop="assetPointVOList" align="left" label="瞬时值/测点名称">
<template slot-scope="scope">
<el-scrollbar style="whiteSpace:nowrap;">
<div v-for="item in scope.row.assetPointVOList" :key="item.id"
style="display: inline-block;margin-right: 30px;" class="icon_box">
<el-tooltip placement="top">
<div slot="content">{{item.pointValue}}<br />{{ item.pointName || '无测点名称'}}</div>
<div style="text-align: center;">
<div style="color: #FF4500;font-size: 24px;font-weight:600" class="icon_val" v-show="item.isAlarm == true">{{ item.pointValue }}</div>
<div style="color: #409EFF;font-size: 22px;" class="icon_val" v-show="item.isAlarm == false">{{ item.pointValue }}</div>
<div style="font-size: 14px;" class="mt-10 icon_name">{{ item.pointName || '无测点名称'}}</div>
</div>
</el-tooltip>
</div>
</el-scrollbar>
</template>
</el-table-column> -->
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getTableData" />
</div>
<!-- 修改-->
<el-dialog title="修改" :visible.sync="openedit" width="50%" append-to-body :close-on-click-modal="false">
<el-form label-width="80px">
<el-form-item label="设备编号" prop="deviceid">
<el-input v-model.trim="deviceid" disabled />
</el-form-item>
<el-form-item label="设备名称" prop="devicename">
<el-input v-model.trim="devicename" disabled />
</el-form-item>
<el-form-item label="展示测点" prop="pointListVOList">
<el-select v-model="pointListVOList" multiple filterable placeholder="请选择测点">
<el-option v-for="item in pointoptions" :key="item.id" :label="item.pointName+' / '+item.pointId"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="">
<el-button plain @click="toSort">测点排序</el-button>
</el-form-item> -->
<div style="margin: auto;width: 80px;">
<el-button type="primary" @click="submitForm()">确 定</el-button>
</div>
</el-form>
</el-dialog>
<!-- 排序 -->
<el-drawer title="测点排序" :visible.sync="opentoSort" direction="rtl">
<div class="defaultSort">
{{defaultSortTit}}
</div>
<div class="sortTit">拖动调整测点排序</div>
<draggable :list="sortList" animation="200" ghostClass="ghost" @end="endSort">
<div class="sortOne" v-for="(item,index) in sortList" :key="index">
<div class="sortCon">{{item.id}}</div>
<div class="sortCon">{{item.pointId}}</div>
<div class="sortCon">{{item.pointName}}</div>
</div>
</draggable>
<div class="page-footer">
<el-button type="primary" @click="submitSort">确定</el-button>
<el-button type="" @click="quxiao">取消</el-button>
</div>
</el-drawer>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import { mapGetters } from 'vuex'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
addtypelist, statuslist, assetStatus, equipmentSwitchPoint,
pointdropDown, getEquipmentPoint, updateEquipmentPoint, getSortList, updateSort, getSortRemark
} from "@/api/assetmanage/assetaccount";
export default {
name: 'Devicestatus',
components: {
Treeselect,
draggable,
},
watch: {
// 监听deptId
'assetTypeId': 'currDeptChange'
},
data() {
return {
freshstatus: false,
openedit: false,
treedata: [],
// 查询参数
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
assetName: undefined,
assetTypeId: undefined,
},
listLoading: false,
"tableColumnList": [
{
"prop": "assetName",
"propName": "设备名称",
"propDescribtion": null,
"hasSort": false,
"fiexd":'left'
},
{
"prop": "switchPointValue",
"propName": "开关启停",
"propDescribtion": null,
"hasSort": false,
"fiexd":'left'
},
{
"prop": "webAddress",
"propName": "组态画面",
"propDescribtion": null,
"hasSort": false,
"fiexd":'left'
},
{
"prop": "v1",
"propName": "压力",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v2",
"propName": "温度",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v3",
"propName": "3压力",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v4",
"propName": "4温度",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v5",
"propName": "5压力",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v6",
"propName": "6温度",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v3",
"propName": "3压力",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v4",
"propName": "4温度",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v5",
"propName": "5压力",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v6",
"propName": "6温度",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v3",
"propName": "3压力",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v4",
"propName": "4温度",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v5",
"propName": "5压力",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v6",
"propName": "6温度",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v3",
"propName": "3压力",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v4",
"propName": "4温度",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v5",
"propName": "5压力",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v6",
"propName": "6温度",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v3",
"propName": "3压力",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v4",
"propName": "4温度",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v5",
"propName": "5压力",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "v6",
"propName": "6温度",
"propDescribtion": null,
"hasSort": false
},
// {
// "prop": "time",
// "propName": "上报时间",
// "propDescribtion": null,
// "hasSort": false
// },
],
dataList: [
{
// "time": {
// "value": "2024-08-06 21:56:15.376",
// "alarm": false,
// "lable_name": 'time',
// },
"webAddress": {
"value": "hhhhhhhh",
"alarm": false,
"lable_name": 'webAddress',
"webBoardId":null
},
"assetName":{
"value": "设备1",
"alarm": false,
"lable_name": 'assetName',
"id":"1819665331543883778"
},
"switchPointValue":{
"value": "",
"alarm": false,
"lable_name": 'switchPointValue',
"switchPoint": 3645480,
"switchPointId": "TEST1",
"switchPointName": "报警标识",
"switchPointValue": "1",
},
"v1": {
"value": "1.0",
"alarm": true
},
"v2": {
"value": "10.0",
"alarm": false
},
"v3": {
"value": "1.0",
"alarm": true
},
"v4": {
"value": "10.0",
"alarm": true
},
"v5": {
"value": "1.0",
"alarm": true
},
"v6": {
"value": "10.0",
"alarm": false
}
},
{
// "time": {
// "value": "2024-08-06 21:56:15.376",
// "alarm": false,
// "lable_name": 'time',
// },
"assetName":{
"value": "设备2",
"alarm": false,
"lable_name": 'assetName',
"id":"1820297216169570306"
},
"webAddress": {
"value": "hhh22hhhhh",
"alarm": false,
"webBoardId":135,
"lable_name": 'webAddress',
},
"switchPointValue":{
"value": "1",
"alarm": false,
"lable_name": 'switchPointValue',
"switchPoint": 3645480,
"switchPointId": "TEST13",
"switchPointName": "开关1",
"switchPointValue": "13",
},
"v1": {
"value": "1.0",
"alarm": false
},
"v2": {
"value": "10.0",
"alarm": true
},
"v3": {
"value": "1.0",
"alarm": true
},
"v4": {
"value": "10.0",
"alarm": false
},
"v5": {
"value": "1.0",
"alarm": true
},
"v6": {
"value": "10.0",
"alarm": false
}
}
],
assetId: '',
assetOption: [],
deviceid: '',
devicename: '',
pointoptions: [],
pointListVOList: [],
opentoSort: false,
defaultSortTit: '',
sortList: [],
sortParams: {
id: '',
equipmentPointListVOList: []
}
}
},
computed: {
...mapGetters([
'roles', "userMsg", 'statusFail', 'statusSuccess', 'userId', 'tenantId', 'tenantType'
])
},
mounted() {
this.gettype()
this.getTableData()
this.getSortRemark()
},
unmounted() {
clearInterval(this.timer);
},
beforeDestroy() {
// 清除定时器
if (this.timer) {
clearInterval(this.timer);
}
},
methods: {
todetail(row) {
this.$router.push({ path: "/kanbantechnology/technologyList", query: { webBoardId: row.webBoardId } });
},
// 自动刷新
changelfresh(event) {
// console.log(event)
this.freshstatus = event
if (event == true) {
this.timer = setInterval(() => {
if (document.getElementById('mainpdevice')) {
this.getTableData()
}
}, 10000)
} else {
clearInterval(this.timer);
}
},
submitForm() {
let data = {
id: this.bianhao,
pointIdList: this.pointListVOList
}
updateEquipmentPoint(data).then((response) => {
this.openedit = false
this.getTableData()
})
},
editasset(row) {
this.bianhao = row.id
this.openedit = true
console.log(row)
let data = {
id: row.id
}
pointdropDown(data).then((response) => {
this.pointoptions = response.data
})
getEquipmentPoint(data).then((response) => {
this.deviceid = response.data.id
this.devicename = response.data.assetName
this.pointListVOList = response.data.pointIdList
})
},
changeswitch(row) {
let data = {
pointPrimaryKey: row.switchPoint,
pointValue: row.switchPointValue
}
// console.log("data",data)
this.$confirm('是否针对测点:' + row.switchPointId + '/' + row.switchPointName + '进行返控,返控数值:' + row.switchPointValue, '是否确认进行测点返控?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
assetStatus(data).then((response) => {
let pdata = {
switchPointId: row.switchPoint
}
this.timer = setInterval(() => {
equipmentSwitchPoint(pdata).then((response) => {
console.log('---', response.data.status)
if (response.data.status == false) {
this.listLoading = true;
} else {
this.listLoading = false;
clearInterval(this.timer);
this.getTableData();
}
})
}, 1000)
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
this.getTableData();
});
},
// 归属分类
/** 转换s树数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.assetTypeName,
children: node.children
};
},
gettype() {
addtypelist().then((response) => {
this.treedata = this.handleTree(response.data, "id");
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getTableData();
},
/** 重置按钮操作 */
resetQuery() {
this.time = []
this.queryParams.timeFrom = undefined
this.queryParams.timeTo = undefined
this.resetForm("queryForm");
this.handleQuery();
},
// 查看列表
getTableData() {
this.listLoading = true;
// console.log("this.queryParams",this.queryParams)
// return false
statuslist(this.queryParams).then((response) => {
this.total = response.total;
this.dataList = response.rows
this.listLoading = false;
})
},
// 测点排序
toSort() {
this.opentoSort = true
this.getSortList(this.bianhao)
},
// 获取排序备注
getSortRemark() {
getSortRemark().then((result) => {
if (result.code == 200) {
this.defaultSortTit = result.data
}
}).catch((err) => {
});
},
// 获取排序列表
getSortList(id) {
getSortList({ id: id }).then((result) => {
if (result.code == 200) {
this.sortList = result.data
}
}).catch((err) => {
});
},
// 提交排序
submitSort() {
this.sortParams.id = this.bianhao;
this.sortParams.equipmentPointListVOList = this.sortList;
updateSort(this.sortParams).then((result) => {
if (result.code == 200) {
this.opentoSort = false;
this.getTableData()
this.$message({
type: 'success',
message: '排序修改成功'
});
}
}).catch((err) => {
});
},
quxiao() {
this.sortParams.id = '';
this.sortParams.equipmentPointListVOList = [];
this.opentoSort = false;
},
endSort() {
console.log(this.sortList);
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-drawer__body {
padding: 0 20px 20px 20px;
}
.sortTit {
margin-top: 15px;
text-align: right;
margin-bottom: 10px;
}
.sortOne {
display: flex;
.sortCon {
flex: 1;
text-align: center;
height: 48px;
line-height: 48px;
border-bottom: 1px solid
}
}
.ghost {
background:
}
.page-footer {
margin-top: 20px;
display: flex;
justify-content: space-evenly;
}
.icon_box {
width: 75px;
.icon_val {
width: 75px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon_name {
width: 75px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
</style>