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

点位上传、下载

Browse Source
This commit is contained in:
白菜
2025-12-04 17:46:11 +08:00
parent 11d44de513
commit cd8871d45a
2 changed files with 201 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/ems/site/sblb/PointUpload.vue
View File

@ -1,12 +1,15 @@
<template>
<el-dialog :visible.sync="show" class="ems-dialog" title="点位上传" width="400px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
<!-- <file-upload :fileType='["xls", "xlsx"]' value="String" :limit="1" :drag="false" @input="updateFile"/>-->
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :data="upload.data" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<el-dialog :visible.sync="show" class="ems-dialog" title="点位上传" width="400px" append-to-body
:close-on-click-modal="false" :close-on-press-escape="false">
<!-- <file-upload :fileType='["xls", "xlsx"]' value="String" :limit="1" :drag="false" @input="updateFile"/>-->
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
:data="upload.data" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入xls、xlsx格式文件。</span>
<!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>-->
<!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>-->
</div>
</el-upload>
<div slot="footer">
@ -20,33 +23,34 @@
</style>
<script>
import { getToken } from "@/utils/auth"
import {getToken} from "@/utils/auth"
export default {
data(){
data() {
return {
show:false,
show: false,
// 用户导入参数
upload: {
data:{},
data: {},
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
headers: {Authorization: "Bearer " + getToken()},
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/ems/pointMatch/importDataByDevice"
},
}
},
methods:{
showDialog({siteId,deviceId,deviceCategory}){
this.upload.data={siteId,deviceId,deviceCategory}
methods: {
showDialog({siteId, code}) {
this.upload.data = {siteId, deviceCategory: code}
this.show = true;
},
//关闭弹窗 重置数据
handleClosed(){
handleClosed() {
this.$refs.upload.clearFiles()//写在before-closed无效
this.upload.data={}
this.show=false
this.upload.data = {}
this.show = false
},
// updateFile(data){
// console.log('上传文件emit',data)
@ -60,10 +64,10 @@ export default {
},
// 文件上传成功处理 返回参数response, file, fileList
handleFileSuccess(response) {
console.log('上传文件结果',response)
console.log('上传文件结果', response)
this.upload.isUploading = false
if(response.code === 500 && !response.msg) response.msg = '上传失败'
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + (response.msg || '上传成功' )+ "</div>", "导入结果", { dangerouslyUseHTMLString: true })
if (response.code === 500 && !response.msg) response.msg = '上传失败'
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + (response.msg || '上传成功') + "</div>", "导入结果", {dangerouslyUseHTMLString: true})
this.$emit('update')
this.handleClosed()
},

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

@ -1,56 +1,87 @@
<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="searchLoading" loading-text="正在加载数据" @change="onSearch" clearable>
<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 label="站点选择">
<el-select v-model="siteId" placeholder="请选择换电站名称" :loading="searchLoading" loading-text="正在加载数据"
@change="onSearch" clearable>
<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-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-dropdown @command="downloadPointDetail">
<el-button
style="margin-left:10px;"
type="primary"
plain>
下载点位清单
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in deviceCategoryList" :key="index+'deviceCategoryList'"
:command="item">
{{ item.name }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown @command="uploadPointDetail">
<el-button
style="margin-left:10px;"
type="success"
plain>
上传点位清单
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in deviceCategoryList" :key="index+'deviceCategoryList'"
:command="item">
{{ item.name }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-table
class="common-table"
:data="tableData"
stripe
max-height="600px"
style="width: 100%;margin-top: 25px">
class="common-table"
:data="tableData"
stripe
max-height="600px"
style="width: 100%;margin-top: 25px">
<el-table-column
prop="siteId"
label="站点ID">
prop="siteId"
label="站点ID">
</el-table-column>
<el-table-column
prop="siteName"
label="站点名称">
prop="siteName"
label="站点名称">
</el-table-column>
<el-table-column
prop="deviceId"
label="设备ID"
prop="deviceId"
label="设备ID"
>
</el-table-column>
<el-table-column
prop="deviceName"
label="设备名称">
prop="deviceName"
label="设备名称">
</el-table-column>
<el-table-column
prop="categoryName"
label="设备类别">
prop="categoryName"
label="设备类别">
</el-table-column>
<el-table-column
prop="runningStatus"
label="在线状态">
prop="runningStatus"
label="在线状态">
<template slot-scope="scope">
<span>{{$store.state.ems.deviceStatusOptions[scope.row.runningStatus]}}</span>
<span>{{ $store.state.ems.deviceStatusOptions[scope.row.runningStatus] }}</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="250">
fixed="right"
label="操作"
width="250">
<template slot-scope="scope">
<el-button
@click="pointDetail(scope.row,'point')"
@ -66,56 +97,43 @@
</el-button>
<br>
<el-button
@click="downloadPointDetail(scope.row)"
@click="editDevice(scope.row)"
style="margin-top:10px;"
type="primary"
plain
type="warning"
size="mini">
下载点位清单
</el-button>
<el-button
@click="uploadPointDetail(scope.row)"
style="margin-top:10px;"
type="success"
plain
size="mini">
上传点位清单
</el-button>
<br>
<el-button
@click="editDevice(scope.row)"
style="margin-top:10px;"
type="warning"
size="mini">
编辑
</el-button>
<el-button
type="danger"
style="margin-top:10px;"
@click="deleteDevice(scope.row)"
size="mini">
type="danger"
style="margin-top:10px;"
@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"
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-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-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>
@ -126,89 +144,98 @@
</template>
<script>
import {getDeviceInfoList,getDeviceDetailInfo,deleteService} from'@/api/ems/site'
import {deleteService, getDeviceDetailInfo, getDeviceInfoList} from '@/api/ems/site'
import {getAllSites} from '@/api/ems/zddt'
import {formatNumber} from "@/filters/ems";
import {getAllDeviceCategory} from '@/api/ems/search'
import PointTable from './PointTable.vue'
import AddDevice from "./AddDevice.vue";
import PointUpload from "./PointUpload.vue";
export default {
name: "Sblb",
components:{AddDevice,PointTable,PointUpload},
components: {AddDevice, PointTable, PointUpload},
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'},
loading: false,
searchLoading: false,
mode: '',//新增、编辑设备
editDeviceId: '',//编辑设备id
siteId: '',
siteList: [],
tableData: [],
deviceCategoryList: [],//设备类别
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',
detailformatAttr: {
'deviceType': 'deviceTypeOptions',
'communicationStatus': 'communicationStatusOptions',
}
}
},
methods:{
methods: {
// 获取设备类别
getDeviceCategoryList() {
getAllDeviceCategory().then(response => {
this.deviceCategoryList = response?.data || []
})
},
// 查看设备电位表格
pointDetail(row,dataType){
this.$refs.pointTable.showTable(row,dataType)
pointDetail(row, dataType) {
this.$refs.pointTable.showTable(row, dataType)
},
// 下载点位清单
downloadPointDetail({siteId,deviceCategory,deviceName}){
downloadPointDetail(command) {
this.download('ems/pointMatch/export', {
siteId,
deviceCategory
}, `点位清单_${deviceName}_${new Date().getTime()}.xlsx`)
siteId: this.siteId,
deviceCategory: command.code
}, `点位清单_${command.name}_${new Date().getTime()}.xlsx`)
},
// 上传点位清单
uploadPointDetail(row){
this.$refs.pointUpload.showDialog(row)
uploadPointDetail(command) {
this.$refs.pointUpload.showDialog({...command, siteId: this.siteId})
},
clearEditDeviceData(){
clearEditDeviceData() {
this.mode = '';
this.editDeviceId=''
this.editDeviceId = ''
},
// 新增设备 展示弹窗
addDevice(){
addDevice() {
this.mode = 'add';
this.$refs.addDevice.dialogTableVisible = true
},
// 编辑设备
editDevice(row){
editDevice(row) {
this.mode = 'edit';
this.editDeviceId = row.id
this.$refs.addDevice.dialogTableVisible = true;
},
//删除设备
deleteDevice(row){
deleteDevice(row) {
this.$confirm(`确认要设备${row.deviceName}吗?`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
showClose: false,
closeOnClickModal: false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
@ -234,73 +261,82 @@ export default {
//取消关机
});
},
handleClosed(done){
this.detailData.forEach((item)=>{item.value = ''})
handleClosed(done) {
this.detailData.forEach((item) => {
item.value = ''
})
done()
},
toDetail(id){
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.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})
}).finally(() => {
this.loading = false
})
},
// 分页
handleSizeChange(val) {
this.pageSize = val;
this.$nextTick(()=>{
this.$nextTick(() => {
this.getData()
})
},
handleCurrentChange(val) {
this.pageNum = val
this.$nextTick(()=>{
this.$nextTick(() => {
this.getData()
})
},
// 搜索
onSearch(){
this.pageNum =1//每次搜索从1开始搜索
onSearch() {
this.pageNum = 1//每次搜索从1开始搜索
this.getData()
},
// 重置
onReset(){
this.siteId=''
this.pageNum =1//每次搜索从1开始搜索
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 || [];
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})
}).finally(() => {
this.loading = false
})
},
//获取站点列表
getZdList(){
this.searchLoading=true
getZdList() {
this.searchLoading = true
return getAllSites().then(response => {
this.siteList = response?.data || []
if(this.siteList.length>0) this.siteId = this.siteList[0].siteId
}).finally(() => {this.searchLoading=false})
if (this.siteList.length > 0) this.siteId = this.siteList[0].siteId
}).finally(() => {
this.searchLoading = false
})
}
},
mounted() {
this.loading=true
this.siteId=''
this.pageNum =1//每次搜索从1开始搜索
this.getZdList().then(()=>{
this.loading = true
this.siteId = ''
this.pageNum = 1//每次搜索从1开始搜索
this.getDeviceCategoryList()
this.getZdList().then(() => {
this.getData()
})
}