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

综合查询

Browse Source
This commit is contained in:
白菜
2025-09-04 20:12:05 +08:00
parent 243724c9a6
commit c502688737
3 changed files with 220 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/filters/ems.js
View File

@ -17,7 +17,7 @@ export const formatDate = (val,toSeconds = false,onlyTime=false) => {
if(!toSeconds){
return front
} else{
return front +''+back
return front +' '+back
}

142
src/views/ems/search/DateTimeSelect.vue Normal file
View File

@ -0,0 +1,142 @@
<template>
<div class="time-range">
<el-date-picker
v-model="dateRange"
:type="type"
range-separator="至"
start-placeholder="开始时间"
:format="valueFormat"
:value-format="valueFormat"
:clearable="false"
:picker-options="pickerOptions"
end-placeholder="结束时间">
</el-date-picker>
<el-button size="mini" style="margin-left: 10px;" :loading="loading" @click="reset">重置</el-button>
<el-button type="primary" size="mini" :loading="loading" @click="search">搜索</el-button>
<el-button type="primary" size="mini" :loading="loading" @click="timeLine('before')">上一时段</el-button>
<el-button type="primary" size="mini" :loading="loading" @click="timeLine('next')" :disabled="disabledNextBtn">下一时段</el-button>
</div>
</template>
<script>
import {formatDate} from '@/filters/ems'
export default {
props:{
dataUnit:{
type:Number,
default:1
}
},
computed:{
type(){
return this.dataUnit === 3 ? 'daterange' : 'datetimerange'
},
valueFormat(){
return this.dataUnit === 3 ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm'
},
disabledNextBtn(){
if(this.dateRange && this.dateRange.length ===2){
return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
}else{
return true
}
}
},
watch:{
dataUnit:{
handler(newVal,oldVal){
console.log('wacth到了dataUnit的变化',newVal,oldVal)
newVal && newVal!==oldVal && this.init()
},
immediate: true,
}
},
data() {
return {
loading:false,
dateRange:[],
defaultDateRange:[],
pickerOptions:{
disabledDate(time) {
return time.getTime() > Date.now();
},
},
}
},
methods: {
init(){
const {dataUnit} = this
const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
const now = new Date(),formatNow = formatDate(now.getTime(),dataUnit !== 3 );
const timeAgo = formatDate(new Date(now.getTime() - timeDis),dataUnit !== 3)
this.dateRange = [timeAgo, formatNow];
this.defaultDateRange=[timeAgo, formatNow];
console.log('init',timeAgo,formatNow)
this.$emit('updateDate',this.dateRange || [])
},
showBtnLoading(status){
this.loading = status
},
// 切换分、时、天 重置时间可选范围
resetDate(){
this.dateRange = this.defaultDateRange
},
//重置 设置时间范围为初始化时间段
reset(){
this.resetDate()
this.$emit('updateDate',this.dateRange || [])
},
// 搜索
search(){
if(this.dateRange && this.dateRange.length>0){
const {dataUnit} = this
const [start,end] = this.dateRange
const startTime = new Date(start),endTime=new Date(end)
const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
if(endTime - startTime > timeDis){
this.$message.error(`时间范围不能超过${dataUnit === 3 ? '30天' : dataUnit === 2 ? '24小时' : '1小时'}`)
}
}else{
this.$emit('updateDate',this.dateRange || [])
}
},
timeLine(type){
if(!this.dateRange) return
//baseTime,maxTime 毫秒数
const baseTimes= this.dataUnit === 3 ? 24 * 60 * 60 * 1000 :this.dataUnit === 2 ? 60 * 60 * 1000 : 60 * 1000
const baseDis = this.dataUnit === 3 ? 30 :this.dataUnit === 2 ? 24 : 60
let baseTime = type === 'before' ? new Date(this.dateRange[0]).getTime() - baseTimes :new Date(this.dateRange[1]).getTime() + baseTimes ,
maxTime = new Date(this.defaultDateRange[1]).getTime()
//updateTime 毫秒数
let updateTime = type === 'before' ? baseTime - baseDis * baseTimes : baseTime + baseDis * baseTimes
if(type === 'next' && updateTime >= maxTime) updateTime = maxTime
const start = formatDate(type === 'before' ? updateTime : baseTime,this.dataUnit !== 3)
const end = formatDate(type === 'before' ? baseTime : updateTime,this.dataUnit !== 3)
this.dateRange = [start,end]
this.$emit('updateDate',this.dateRange || [])
},
}
}
</script>
<style lang="scss" scoped>
.time-range{
display: flex;
::v-deep {
.el-range-editor--medium .el-range__icon, .el-range-editor--medium .el-range__close-icon{
line-height: 22px;
}
.el-range-editor--medium.el-input__inner{
height: 30px;
}
.el-range-editor--medium .el-range-separator{
line-height: 24px;
}
.el-button--mini{
padding:3px 10px;
}
}
}
</style>

79
src/views/ems/search/index.vue
View File

@ -28,6 +28,13 @@
@select="handleSelect"
></el-autocomplete>
</el-form-item>
<el-form-item v-if="isDtdc" label="二级设备(不超过5个)" prop="child" :rules="[{ required: true, message: '请选择二级设备' }]" style="width: 200px;margin-right: 50px">
<el-cascader
v-model="form.child"
:props="{ multiple: true }"
:options="childOptions"
@change="handleChildChange"></el-cascader>
</el-form-item>
<el-form-item label="横坐标" prop="dataUnit" :rules="[{ required: true, message: '请选择横坐标' }]">
<el-radio-group v-model="form.dataUnit">
<el-radio :label="1">分钟</el-radio>
@ -43,6 +50,7 @@
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
<div slot="header" class="time-range-header">
<span class="card-title"></span>
<date-time-select :data-unit="this.form.dataUnit" @updateDate="(val)=>form.dataRange =val"/>
</div>
<div style="height: 310px" id="searchChart"></div>
</el-card>
@ -54,26 +62,91 @@ import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {getAllSites} from "@/api/ems/zddt";
import {getAllDeviceCategory,getPointValueList,pointFuzzyQuery} from '@/api/ems/search'
import DateTimeSelect from "./DateTimeSelect.vue";
export default {
name: "Search",
mixins: [resize],
components:{DateTimeSelect},
computed: {
isDtdc(){
return this.form.categoryName === '单体电池'
}
},
data() {
return {
chart: null,
deviceCategoryList:[],//设备列表
siteList: [],//站点列表
childOptions:[
{
value: '021_DDS_01',
label: '站点一',
children:[{
value: '1',
label: '1-50',
children:[{
value: '001',
label: '设备一'
},{
value: '002',
label: '设备二'
},{
value: '003',
label: '设备三'
}]
}]
},
{
value: '021_DDS_02',
label: '站点二',
children:
[{
value: '1',
label: '1-50',
children:[{
value: '001',
label: '设备一'
},{
value: '002',
label: '设备二'
}, {
value: '003',
label: '设备三'
}]
},
{
value: '2',
label: '51-100',
children:[{
value: '001',
label: '设备一'
},{
value: '002',
label: '设备二'
},{
value: '003',
label: '设备三'
}]
}]
}
],//二级设备列表
form: {
dataRange:[],//时间选择范围
child:[],
siteIds: [],//当前选中的站点id 默认选中第一个站点
categoryName: '',//设备
pointName: '',//点位
dataUnit: '',//横坐标
dataUnit: 1,//横坐标
},
loading: false,
}
},
methods: {
handleChildChange(data){
console.log('选择二级设备',data)
this.form.child=data
},
showLoading(){
this.chart && this.chart.showLoading()
},
@ -150,7 +223,6 @@ export default {
this.form.pointName = data.value
},
querySearchAsync(query,cb){
// query = query.trim()
console.log('查询数据',query)
if(this.form.siteIds.length===0 || !this.form.categoryName){
this.$message({
@ -188,6 +260,9 @@ export default {
if(!this.form.pointName){
return this.$message.error('请输入正确的点位');
}
if(this.isDtdc && (this.form.child.length === 0 || this.form.child.length > 5 )){
return this.$message.error('请选择二级设备且不能超过5个');
}
this.loading = true
const{siteIds,dataUnit,categoryName,pointName}=this.form
getPointValueList({siteIds,dataUnit,categoryName,pointName}).then(response => {