develop_cloud #1
@ -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
142
src/views/ems/search/DateTimeSelect.vue
Normal 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>
|
||||
@ -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 => {
|
||||
|
||||
Reference in New Issue
Block a user