xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备列表、工单列表

Browse Source
This commit is contained in:
白菜
2025-07-12 15:55:05 +08:00
parent 111079eb48
commit ee6628a19b
10 changed files with 513 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/api/ems/dzjk.js
View File

@ -174,3 +174,40 @@ export function getAmmeterData({siteId,deviceId,dateTime}) {
})
}
//策略列表
export function strategyRunningList(siteId) {
return request({
url: `/system/strategyRunning/list?siteId=${siteId}`,
method: 'get'
})
}
//停止策略
export function stopStrategyRunning(siteId) {
return request({
url: `/system/strategyRunning/stop?siteId=${siteId}`,
method: 'get'
})
}
// 获取所有主策略
export function getMainStrategyList(siteId) {
return request({
url: `/system/strategyRunning/getMainStrategyList?siteId=${siteId}`,
method: 'get'
})
}
//获取所有辅助策略
export function getAuxStrategyList() {
return request({
url: `/system/strategyRunning/getAuxStrategyList`,
method: 'get'
})
}
//配置策略
export function configStrategy(data) {
return request({
url: `/system/strategyRunning/configStrategy`,
method: 'post',
data
})
}

36
src/api/ems/site.js
View File

@ -16,9 +16,41 @@ export function getDeviceInfoList({siteId,pageSize,pageNum}) {
}
// 设备详情
export function getDeviceDetailInfo(deviceId) {
export function getDeviceDetailInfo(id) {
return request({
url: `/ems/siteConfig/getDeviceDetailInfo?deviceId=${deviceId}`,
url: `/ems/siteConfig/getDeviceDetailInfo?id=${id}`,
method: 'get'
})
}
// 获取所有设备类别
export function getDeviceCategory() {
return request({
url: `/ems/siteConfig/getDeviceCategory`,
method: 'get'
})
}
// 新增设备
export function addDevice(data) {
return request({
url: `/ems/siteConfig/addDevice`,
method: 'post',
data
})
}
// 编辑设备
export function updateDevice(data) {
return request({
url: `/ems/siteConfig/updateDevice`,
method: 'post',
data
})
}
// 删除设备
export function deleteService(id) {
return request({
url: `/ems/siteConfig/deleteService/`+id,
method: 'delete',
})
}

6
src/components/ImageUpload/index.vue
View File

@ -196,7 +196,9 @@ export default {
// 上传成功回调
handleUploadSuccess(res, file) {
if (res.code === 200) {
this.uploadList.push({ name: res.fileName, url: res.fileName })
this.uploadList.push({ name: res.fileName, url: res.url })
// todo
// this.uploadList.push({ name: res.fileName, url: res.fileName })
this.uploadedSuccessfully()
} else {
this.number--
@ -256,7 +258,7 @@ export default {
::v-deep .el-upload-list--picture-card.is-disabled + .el-upload--picture-card {
display: none !important;
}
}
// 去掉动画效果
::v-deep .el-list-enter-active,

3
src/store/modules/ems.js
View File

@ -11,7 +11,8 @@ const ems = {
alarmLevelOptions:{'A':'提示','B':'一般','C':'严重','D':'紧急'},//告警等级
alarmStatusOptions:{'0':'待处理','1':'已处理','2':'处理中'},//告警状态
deviceTypeOptions:{'TCP':'TCP','RTU':'RTU'},//设备类型
ticketStatusOptions:{0:'待处理', 1:'已处理', 2:'处理中'}//工单处理状态
ticketStatusOptions:{0:'待处理', 1:'已处理', 2:'处理中'},//工单处理状态
strategyStatusOptions:{'0':'未启用', 1:'已运行', 2:'已暂停', 3:'禁用', 4:'删除'},//策略状态
},
mutations: {
SET_ZD_LIST(state, list) {

14
src/utils/validate.js
View File

@ -11,7 +11,7 @@ export function isPathMatch(pattern, path) {
}
/**
* 判断value字符串是否为空
* 判断value字符串是否为空
* @param {string} value
* @returns {Boolean}
*/
@ -23,7 +23,7 @@ export function isEmpty(value) {
}
/**
* 判断url是否是http或https
* 判断url是否是http或https
* @param {string} url
* @returns {Boolean}
*/
@ -112,3 +112,13 @@ export function isArray(arg) {
}
return Array.isArray(arg)
}
/**
* @param {string}
* @returns {Boolean}
* 只能输入中文、英文、数字、特殊字符!@#$%^&*-,./
*/
export function validText(text) {
const reg = /^[a-zA-Z0-9\u4e00-\u9fa5!@#$%^&*-,.]+$/
return reg.test(text)
}

5
src/views/ems/dzjk/clpz/clyx/index.vue
View File

@ -21,14 +21,19 @@
<script>
import ClContainer from './../ClContainer.vue'
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
export default {
name:'DzjkClpzClyx',
components:{ClContainer},
mixins: [getQuerySiteId],
data() {
return {
}
},
methods:{
init(){}
},
mounted(){
}

339
src/views/ems/site/sblb/AddDevice.vue Normal file
View File

@ -0,0 +1,339 @@
<template>
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增设备':`编辑设备` " :close-on-click-modal="false" :show-close="false" :destroy-on-close="true">
<el-form v-loading="loading>0" ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-form-item label="站点" prop="siteId">
<el-select v-model="formData.siteId" placeholder="请选择" :style="{width: '100%'}">
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'siteOptions'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备id" prop="deviceId" v-if="mode !== 'add'">
<el-input disabled v-model="formData.deviceId" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="formData.deviceName" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="设备描述" prop="description">
<el-input v-model="formData.description" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="工作状态" prop="communicationStatus">
<el-select v-model="formData.communicationStatus" placeholder="请选择" :style="{width: '100%'}">
<el-option :label="value" :value="key" v-for="(value,key) in communicationStatusOptions" :key="key+'communicationStatusOptions'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="formData.deviceType" placeholder="请选择" :style="{width: '100%'}">
<el-option :label="value" :value="key" v-for="(value,key) in deviceTypeOptions" :key="key+'deviceTypeOptions'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备类别" prop="deviceCategory">
<el-select v-model="formData.deviceCategory" placeholder="请选择" :style="{width: '100%'}">
<el-option :label="item" :value="item" v-for="(item,index) in deviceCategoryList" :key="index+'deviceCategoryList'"></el-option>
</el-select>
</el-form-item>
<!-- todo 只有电池簇展示-->
<el-form-item label="上级设备" prop="parentId" v-if="formData.deviceCategory === dccDeviceCategory">
<el-select v-model="formData.parentId" :placeholder="parentDeviceList.length === 0 && !formData.siteId ? '请先选择站点' : '请选择'" :style="{width: '100%'}">
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in parentDeviceList" :key="index+'parentDeviceList'" ></el-option>
</el-select>
</el-form-item>
<!--todo tcp设备才展示ip地址、端口号？-->
<el-form-item label="TCP设备的ip地址" prop="ipAddress" v-if="formData.deviceType === 'TCP'">
<el-input v-model="formData.ipAddress" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="TCP设备的端口号" prop="ipPort" v-if="formData.deviceType === 'TCP'">
<el-input v-model="formData.ipPort" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="串口路径" prop="serialPort">
<el-input v-model="formData.serialPort" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="波特率" prop="baudRate">
<el-input v-model="formData.baudRate" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="数据位" prop="dataBits">
<el-input v-model="formData.dataBits" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="停止位" prop="stopBits">
<el-input v-model="formData.stopBits" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="校验位" prop="parity">
<el-input v-model="formData.parity" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="图片" prop="pictureUrl">
<image-upload :limit="1" :drag="false" @input="uploadImage" :value="formData.pictureUrl"/>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="saveDialog">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState} from "vuex";
import {getStackNameList} from '@/api/ems/dzjk'
import {getAllSites} from '@/api/ems/zddt'
import {validText} from '@/utils/validate'
import {getDeviceDetailInfo,getDeviceCategory,updateDevice,addDevice} from "@/api/ems/site";
export default {
props:{
mode:{
type:String,
default:"add"
},
id:{
type:String|Number,
required:false
}
},
data() {
const validateText=(rule, value, callback) =>{
if (value !== '' && !validText(value)) {
callback(new Error('只能输入中文、英文、数字和特殊字符!'));
} else {
callback();
}
}
return {
loading:0,
dccDeviceCategory:'CLUSTER',
dialogTableVisible:false,
parentDeviceList:[],//上级设备列表 从接口获取数据
siteList:[],//站点列表 从接口获取数据
deviceCategoryList:[],//设备类别列表 从接口获取数据
formData: {
id:'',//设备唯一标识
siteId:'',//站点ID
deviceId:'',//设备id
deviceName:'',//设备名称
description:'',//设备描述
communicationStatus:'',//工作状态
deviceType:'',//设备类型
deviceCategory:'',//设备类别
parentId:'',//上级设备id
ipAddress:'',//TCP设备的ip地址
ipPort:"",//TCP端口号
serialPort:'',//串口路径
baudRate:'',//波特率
dataBits:'',//数据位
stopBits:'',//停止位
parity:'',//校验位
pictureUrl:'',//设备图片
},
rules: {
siteId:[
{ required: true, message: '请选择站点', trigger: 'blur'}
],
deviceName:[
{ required: true, message: '请输入设备名称', trigger: 'blur'},
{ validator: validateText, trigger: 'blur' }
],
description:[
{ required: true, message: '请输入设备描述', trigger: 'blur'},
{ validator: validateText, trigger: 'blur' }
],
communicationStatus:[
{ required: true, message: '请选择工作状态', trigger: ['blur']}
],
deviceType:[
{ required: true, message: '请选择设备类型', trigger: ['blur']}
],
deviceCategory:[
{ required: true, message: '请选择设备类别', trigger: ['blur']}
],
ipAddress:[
{ validator: validateText, trigger: 'blur' }
],
ipPort:[
{ validator: validateText, trigger: 'blur' }
],
serialPort:[
{ validator: validateText, trigger: 'blur' }
],
baudRate:[
{ validator: validateText, trigger: 'blur' }
],
dataBits:[
{ validator: validateText, trigger: 'blur' }
],
stopBits:[
{ validator: validateText, trigger: 'blur' }
],
parity:[
{ validator: validateText, trigger: 'blur' }
],
pictureUrl:[
{ required: true, message: '请上传图片', trigger: ['blur', 'change']}
],
},
}
},
computed: {
...mapState({
communicationStatusOptions: state => state?.ems?.communicationStatusOptions || {},
deviceTypeOptions:state=>state?.ems?.deviceTypeOptions || {}
})
},
watch:{
'formData.deviceCategory':{
handler(newVal){
// 只有电池簇需要选择上级设备 调用接口获取电池堆列表
if(newVal && newVal === this.dccDeviceCategory){
this.getParentDeviceList()
}
},
immediate:true
},
'formData.siteId':{
handler(newVal,oldVal){
// 只有电池簇需要选择上级设备 调用接口获取电池堆列表
if(newVal && oldVal!== newVal && this.formData.deviceCategory === this.dccDeviceCategory){
this.getParentDeviceList()
}
},
immediate:true
},
dialogTableVisible:{
handler(newVal){
//打开弹窗
if(newVal){
this.getZdList()
this.getDeviceCategoryList()
}
},
immediate: true,
},
id:{
handler(newVal){
if((newVal || newVal===0) && this.mode !== 'add'){
this.loading+=1
getDeviceDetailInfo(newVal).then(response => {
this.formData = JSON.parse(JSON.stringify(response?.data || {}));
}).finally(() => {this.loading-=1})
}
},
immediate: true,
}
},
methods: {
uploadImage(data){
this.formData.pictureUrl = data
},
//获取站点列表
getZdList(){
this.loading+=1
getAllSites().then(response => {
this.siteList = response?.data || []
}).finally(() => {this.loading-=1})
},
// 获取设备类别
getDeviceCategoryList(){
this.loading+=1
getDeviceCategory().then(response => {
this.deviceCategoryList = response?.data || []
}).finally(() => {this.loading-=1})
},
//获取上级id列表
getParentDeviceList(){
if(!this.formData.siteId){
return console.log('请先选择站点')
}
this.formData.parentId=''
this.loading= this.loading+1
getStackNameList(this.formData.siteId).then(response => {
this.parentDeviceList = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {
this.loading=this.loading -1
})
},
saveDialog() {
this.$refs.addTempForm.validate(valid => {
if (!valid) return
this.loading+=1
const {
id='',
siteId='',//站点ID
deviceId='',//设备id
deviceName='',//设备名称
description='',//设备描述
communicationStatus='',//工作状态
deviceType='',//设备类型
deviceCategory='',//设备类别
parentId='',//上级设备id
ipAddress='',//TCP设备的ip地址
ipPort="",//TCP端口号
serialPort='',//串口路径
baudRate='',//波特率
dataBits='',//数据位
stopBits='',//停止位
parity='',//校验位
pictureUrl='',//设备图片
}= this.formData;
if(this.mode === 'add'){
addDevice({siteId,deviceName,description,communicationStatus,deviceType,deviceCategory,parentId,ipAddress,ipPort,serialPort,baudRate,dataBits,stopBits,parity,pictureUrl}).then(response => {
if(response.code === 200){
//新增成功
// 关闭弹窗 更新表格
this.$emit('update')
this.closeDialog()
}
}).finally(() => {
this.loading-=1
})
}else{
updateDevice({id,siteId,deviceName,description,communicationStatus,deviceType,deviceCategory,parentId,ipAddress,ipPort,serialPort,baudRate,dataBits,stopBits,parity,pictureUrl}).then(response => {
if(response.code === 200){
//新增成功
// 关闭弹窗 更新表格
this.$emit('update')
this.closeDialog()
}
}).finally(() => {
this.loading-=1
})
}
})
},
closeDialog(){
this.$emit('clear')
// 清空所有数据
this.$refs.addTempForm.resetFields()
this.formData= {
id:'',//设备唯一标识
siteId:'',//站点ID
deviceId:'',//设备id
deviceName:'',//设备名称
description:'',//设备描述
communicationStatus:'',//工作状态
deviceType:'',//设备类型
deviceCategory:'',//设备类别
parentId:'',//上级设备id
ipAddress:'',//TCP设备的ip地址
ipPort:"",//TCP端口号
serialPort:'',//串口路径
baudRate:'',//波特率
dataBits:'',//数据位
stopBits:'',//停止位
parity:'',//校验位
pictureUrl:'',//设备图片
},
this.dialogTableVisible=false
}
}
}
</script>
<style scoped>
</style>

77
src/views/ems/site/sblb/index.vue
View File

@ -12,6 +12,7 @@
<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"
@ -49,14 +50,26 @@
<el-table-column
fixed="right"
label="操作"
width="140">
width="240">
<template slot-scope="scope">
<el-button
@click="toDetail(scope.row.deviceId)"
@click="toDetail(scope.row.id)"
type="primary"
size="small">
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>
@ -80,19 +93,24 @@
</el-descriptions>
</div>
</el-dialog>
<add-device ref="addDevice" :mode="mode" :id="editDeviceId" @update="getData" @clear="clearEditDeviceData"/>
</div>
</template>
<script>
import {getDeviceInfoList,getDeviceDetailInfo} from'@/api/ems/site'
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:[],
@ -124,13 +142,60 @@ export default {
}
},
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(){
this.$confirm(`确认要设备${row.deviceName}吗?`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
deleteService({id: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(deviceId){
toDetail(id){
this.loading = true
getDeviceDetailInfo(deviceId).then(response => {
getDeviceDetailInfo(id).then(response => {
const data = response?.data || {};
this.detailData.forEach(item=>{
if(this.detailformatAttr[item.attr]){

6
src/views/ems/ticket/AddTicket.vue
View File

@ -42,6 +42,7 @@
<script>
import {mapState} from "vuex";
import {getTicket,getAllUser,addTicket,updateTicket} from'@/api/ems/ticket'
import {validText} from '@/utils/validate'
export default {
props:{
mode:{
@ -57,8 +58,8 @@ export default {
const validateContent=(rule, value, callback) =>{
if (value === '') {
callback(new Error(`请输入${rule.field === 'title' ?'工单标题' :'问题描述'}`));
} else if (!/^[a-zA-Z0-9\u4e00-\u9fa5!@#$%^&*-]+$/.test(value)) {
callback(new Error('只能输入中文、数字和特殊字符!'));
} else if (!validText(value)) {
callback(new Error('只能输入中文、英文、数字和特殊字符!'));
} else {
callback();
}
@ -165,6 +166,7 @@ export default {
},
closeDialog(){
// 清空所有数据
this.$emit('clear')
this.$refs.addTempForm.resetFields()
this.formData={
title: '',//工单标题

11
src/views/ems/ticket/index.vue
View File

@ -76,7 +76,7 @@
style="margin-top:15px;text-align: center"
>
</el-pagination>
<add-ticket ref="addTicket" :mode="mode" :id="editTicketId" @update="resetTick()"/>
<add-ticket ref="addTicket" :mode="mode" :id="editTicketId" @update="getData" @clear="clearEditTicketData"/>
</div>
</template>
@ -125,6 +125,10 @@ export default {
this.getData()
})
},
clearEditTicketData(){
this.mode = '';
this.editTicketId=''
},
addTicket(){
this.mode = 'add';
this.$refs.addTicket.dialogTableVisible = true;
@ -165,11 +169,6 @@ export default {
//取消关机
});
},
resetTick(){
this.mode = '';
this.editTicketId=''
this.getData()
}
},
mounted() {
this.getData()