189 lines
6.4 KiB
Vue
189 lines
6.4 KiB
Vue
<template>
|
||
<div>
|
||
<div class="app-container" style="margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
|
||
<el-form
|
||
ref="querform"
|
||
:model="queryParams"
|
||
:inline="true"
|
||
>
|
||
<el-form-item label="换电站" prop="stationCode">
|
||
<el-select v-model="queryParams.stationCode" placeholder="请选择换电站" style="width: 200px;">
|
||
<el-option v-for="n in yunList" :label="n.name" :value="n.code" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="传送方向" prop="direction">
|
||
<el-select v-model="queryParams.direction" placeholder="请选择传送方向" style="width: 200px;">
|
||
<el-option
|
||
v-for="n in direction"
|
||
:value="n.dictValue"
|
||
:label="n.dictName"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="消息类型" prop="type">
|
||
<el-select v-model="queryParams.type" placeholder="请选择信息类型" style="width: 200px;">
|
||
<el-option
|
||
v-for="n in msgtype"
|
||
:value="n.dictValue"
|
||
:label="n.dictName"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="方法" prop="messageFunction">
|
||
<el-input v-model="queryParams.messageFunction" placeholder="请输入方法" clearable style="width: 160px" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="Search" @click="handBtnqu">搜索</el-button>
|
||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="app-container" style="margin-bottom: 12px;border-radius: 10px;">
|
||
|
||
<!-- <el-tooltip class="item" effect="dark" :content="search? '隐藏搜索' : '显示搜索'" placement="top">
|
||
<el-button size="mini" circle icon="Search" @click="search = !search" />
|
||
</el-tooltip> -->
|
||
<el-table
|
||
style="width:100%;margin-top: 10px;"
|
||
:data="yysList"
|
||
border
|
||
stripe
|
||
max-height="620px"
|
||
>
|
||
|
||
<!-- {{ (queryParams.pageNo - 1) * queryParams.pageSize + index + 1 }} -->
|
||
<el-table-column type="index" min-width="50" align="center">
|
||
<template #default="{ $index }">
|
||
<div>{{(queryParams.pageNo - 1) * queryParams.pageSize+ $index + 1}}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="换电站" min-width="100" align="center" prop="stationCode" :show-overflow-tooltip="true" />
|
||
<el-table-column label="传送方向" min-width="100" align="center" prop="direction" :show-overflow-tooltip="true" />
|
||
<el-table-column label="消息类型" min-width="100" align="center" prop="type" :show-overflow-tooltip="true" />
|
||
<el-table-column label="方法" min-width="120" align="center" prop="messageFunction" :show-overflow-tooltip="true" />
|
||
<el-table-column label="内容" min-width="500" prop="content">
|
||
<template #default="scope">
|
||
<div style="word-wrap: break-word;">{{scope.row.content}}</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div v-if="total > 10" style="display: flex;justify-content: right;padding-top:20px;">
|
||
<el-pagination
|
||
v-model:current-page="queryParams.pageNo"
|
||
v-model:page-size="queryParams.pageSize"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
background
|
||
size="small"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="getyys"
|
||
/>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import {
|
||
gethdzlist
|
||
} from '@/api/swapstation/hdz'
|
||
|
||
import {
|
||
mqttlist
|
||
} from '@/api/swapstation/mqtt'
|
||
|
||
import {
|
||
getdict
|
||
} from '@/api/systemSet/dict'
|
||
|
||
import { ref,reactive} from 'vue'
|
||
|
||
let search = ref(true)
|
||
|
||
let queryParams = reactive({
|
||
pageSize:20, //每页条数
|
||
pageNo:1, //页数
|
||
stationCode:'', //换电站编码
|
||
direction:'', //传送方向
|
||
type:'', //消息类型
|
||
messageFunction:'' //方法 stationInfo
|
||
})
|
||
|
||
//查询
|
||
let total = ref(0)
|
||
let yysList = ref<any>([])
|
||
function handBtnqu(){
|
||
queryParams.pageNo = 1
|
||
total.value = 0
|
||
getyys()
|
||
}
|
||
|
||
//获取传送方向字典
|
||
let direction = ref<any>([])
|
||
getdict({
|
||
typeCode:'mqttcsfx'
|
||
}).then(rps => {
|
||
direction.value = rps.data
|
||
})
|
||
|
||
//获取消息类型字典
|
||
let msgtype = ref<any>([])
|
||
getdict({
|
||
typeCode:'mqttxxtype'
|
||
}).then(rps => {
|
||
msgtype.value = rps.data
|
||
})
|
||
|
||
|
||
|
||
//初始查询换电站
|
||
let yunList = ref<any>([])
|
||
|
||
gethdzlist({
|
||
pageSize:100, //每页条数
|
||
pageNo:1, //页数
|
||
proxyId:'', //归属运营商ID
|
||
name:'', //站点名称
|
||
code:'', //站点编码
|
||
status:'', //状态：1-正常营业，2-正常停运，3-故障停运，4-指令停运，9-其它
|
||
type:'', //站点类型ID
|
||
}).then(rps => {
|
||
if(rps.data){
|
||
let list = (rps.data as any).records
|
||
yunList.value = list?list:[]
|
||
//queryParams.stationCode = list[0].code
|
||
//getyys()
|
||
}
|
||
})
|
||
getyys()
|
||
|
||
|
||
|
||
function getyys() {
|
||
yysList.value.splice(0)
|
||
mqttlist(queryParams).then(rps => {
|
||
if(rps.data){
|
||
yysList.value = (rps.data as any).records
|
||
total.value = (rps.data as any).total
|
||
}
|
||
})
|
||
}
|
||
|
||
function handleSizeChange(val:number) {
|
||
queryParams.pageSize = val
|
||
getyys()
|
||
}
|
||
|
||
//重置
|
||
let querform = ref()
|
||
function resetQuery() {
|
||
querform.value?.resetFields()
|
||
}
|
||
|
||
</script>
|
||
<style scoped>
|
||
.el-divider--horizontal{
|
||
border-color:#5b98cd;
|
||
}
|
||
</style> |