263 lines
8.3 KiB
Vue
263 lines
8.3 KiB
Vue
|
|
<template>
|
|
<div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
|
|
<el-form :inline="true" class="select-container">
|
|
<el-form-item label="站点选择">
|
|
<el-select v-model="siteId" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="onSearch">
|
|
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<!-- <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>-->
|
|
<el-button @click="onReset" native-type="button">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button type="primary" @click="addDevice" native-type="button">新增设备</el-button>
|
|
<el-table
|
|
class="common-table"
|
|
:data="tableData"
|
|
stripe
|
|
max-height="600px"
|
|
style="width: 100%;margin-top: 25px">
|
|
<el-table-column
|
|
prop="siteId"
|
|
label="站点ID">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="siteName"
|
|
label="站点名称">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="deviceId"
|
|
label="设备ID"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="deviceName"
|
|
label="设备名称">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="deviceType"
|
|
label="设备类型">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="communicationStatus"
|
|
label="通信状态">
|
|
<template slot-scope="scope">
|
|
<span>{{$store.state.ems.communicationStatusOptions[scope.row.communicationStatus]}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
fixed="right"
|
|
label="操作"
|
|
width="150">
|
|
<template slot-scope="scope">
|
|
<!-- <el-button-->
|
|
<!-- @click="toDetail(scope.row.id)"-->
|
|
<!-- type="primary"-->
|
|
<!-- size="mini">-->
|
|
<!-- 查看详情-->
|
|
<!-- </el-button>-->
|
|
<el-button
|
|
@click="editDevice(scope.row)"
|
|
type="warning"
|
|
size="mini">
|
|
编辑
|
|
</el-button>
|
|
<el-button
|
|
type="danger"
|
|
@click="deleteDevice(scope.row)"
|
|
size="mini">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
v-show="tableData.length>0"
|
|
background
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="pageNum"
|
|
:page-size="pageSize"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="totalSize"
|
|
style="margin-top:15px;text-align: center"
|
|
>
|
|
</el-pagination>
|
|
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title=" 详细信息" :close-on-click-modal="false" :before-close="handleClosed">
|
|
<div class="descriptions-main" style="padding: 0" >
|
|
<el-descriptions direction="vertical" :column="2" :colon="false" border>
|
|
<el-descriptions-item v-for="(item,index) in detailData" :key="index+'descriptions'" labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" :label="item.label">{{item.value}}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</el-dialog>
|
|
<add-device ref="addDevice" :mode="mode" :id="editDeviceId" @update="getData" @clear="clearEditDeviceData"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getDeviceInfoList,getDeviceDetailInfo,deleteService} from'@/api/ems/site'
|
|
import {getAllSites} from '@/api/ems/zddt'
|
|
import {formatNumber} from "@/filters/ems";
|
|
import AddDevice from "./AddDevice.vue";
|
|
export default {
|
|
name: "Sblb",
|
|
components:{AddDevice},
|
|
data() {
|
|
return {
|
|
loading:false,
|
|
searchLoading:false,
|
|
mode:'',//新增、编辑设备
|
|
editDeviceId:'',//编辑设备id
|
|
siteId:'',
|
|
siteList:[],
|
|
tableData:[],
|
|
pageSize:10,//分页栏当前每个数据总数
|
|
pageNum:1,//分页栏当前页数
|
|
totalSize:0,//table表格数据总数
|
|
dialogTableVisible:false,
|
|
detailData:[
|
|
{label:'设备ID',value:'',attr:'deviceId'},
|
|
{label:'设备名称',value:'',attr:'deviceName'},
|
|
{label:'设备类型',value:'',attr:'deviceType'},
|
|
{label:'通信状态',value:'',attr:'communicationStatus'},
|
|
{label:'TCP设备的IP地址',value:'',attr:'ipAddress'},
|
|
{label:'TCP端口号',value:'',attr:'ipPort'},
|
|
{label:'串口路径',value:'',attr:'serialPort'},
|
|
{label:'波特率',value:'',attr:'baudRate'},
|
|
{label:'数据位',value:'',attr:'dataBits'},
|
|
{label:'停止位',value:'',attr:'stopBits'},
|
|
{label:'校验位',value:'',attr:'parity'},
|
|
{label:'设备描述',value:'',attr:'description'},
|
|
{label:'设备类别',value:'',attr:'deviceCategory'},
|
|
{label:'上级设备ID',value:'',attr:'parentId'},
|
|
{label:'设备唯一标识符',value:'',attr:'deviceId'},
|
|
],
|
|
detailformatAttr:{
|
|
'deviceType':'deviceTypeOptions',
|
|
'communicationStatus':'communicationStatusOptions',
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
clearEditDeviceData(){
|
|
this.mode = '';
|
|
this.editDeviceId=''
|
|
},
|
|
// 新增设备 展示弹窗
|
|
addDevice(){
|
|
this.mode = 'add';
|
|
this.$refs.addDevice.dialogTableVisible = true
|
|
},
|
|
// 编辑设备
|
|
editDevice(row){
|
|
this.mode = 'edit';
|
|
this.editDeviceId = row.id
|
|
this.$refs.addDevice.dialogTableVisible = true;
|
|
},
|
|
//删除设备
|
|
deleteDevice(row){
|
|
this.$confirm(`确认要设备${row.deviceName}吗?`, {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
showClose:false,
|
|
closeOnClickModal:false,
|
|
type: 'warning',
|
|
beforeClose: (action, instance, done) => {
|
|
if (action === 'confirm') {
|
|
instance.confirmButtonLoading = true;
|
|
deleteService(row.id).then(response => {
|
|
response.code === 200 && done();
|
|
}).finally(() => {
|
|
instance.confirmButtonLoading = false;
|
|
})
|
|
} else {
|
|
done();
|
|
}
|
|
}
|
|
}).then(() => {
|
|
//只有在废弃成功的情况下会走到这里
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
});
|
|
this.getData()
|
|
//调用接口 更新表格数据
|
|
}).catch(() => {
|
|
//取消关机
|
|
});
|
|
},
|
|
handleClosed(done){
|
|
this.detailData.forEach((item)=>{item.value = ''})
|
|
done()
|
|
},
|
|
toDetail(id){
|
|
this.loading = true
|
|
getDeviceDetailInfo(id).then(response => {
|
|
const data = response?.data || {};
|
|
this.detailData.forEach(item=>{
|
|
if(this.detailformatAttr[item.attr]){
|
|
item.value=formatNumber(this.$store.state.ems[this.detailformatAttr[item.attr]][data[item.attr]]);
|
|
}else{
|
|
item.value=formatNumber(data[item.attr]);
|
|
}
|
|
|
|
})
|
|
this.dialogTableVisible = true
|
|
}).finally(() => {this.loading = false})
|
|
|
|
},
|
|
// 分页
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.$nextTick(()=>{
|
|
this.getData()
|
|
})
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.pageNum = val
|
|
this.$nextTick(()=>{
|
|
this.getData()
|
|
})
|
|
},
|
|
// 搜索
|
|
onSearch(){
|
|
this.pageNum =1//每次搜索从1开始搜索
|
|
this.getData()
|
|
},
|
|
// 重置
|
|
onReset(){
|
|
this.siteId=''
|
|
this.pageNum =1//每次搜索从1开始搜索
|
|
this.getData()
|
|
},
|
|
// 获取数据
|
|
getData(){
|
|
this.loading=true
|
|
const {siteId,pageNum,pageSize} =this
|
|
getDeviceInfoList({siteId,pageNum,pageSize}).then(response => {
|
|
this.tableData=response?.rows || [];
|
|
this.totalSize = response?.total || 0
|
|
}).finally(() => {this.loading=false})
|
|
},
|
|
//获取站点列表
|
|
getZdList(){
|
|
this.searchLoading=true
|
|
getAllSites().then(response => {
|
|
this.siteList = response?.data || []
|
|
}).finally(() => {this.searchLoading=false})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.onReset()
|
|
this.getZdList()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|