330 lines
10 KiB
Vue
330 lines
10 KiB
Vue
<template>
|
|
<div v-loading="loading" class="ems-dashboard-editor-container" style="background-color: #ffffff">
|
|
<el-form ref="form" :model="form" label-position="top">
|
|
<el-form-item
|
|
label="站点"
|
|
prop="siteIds"
|
|
:rules="[{ required: true, message: '请选择站点' }]"
|
|
>
|
|
<!-- <el-checkbox-group v-model="form.siteIds">-->
|
|
<!-- <el-checkbox v-for="(item,index) in siteList" :key="index+'zdListSearch'" :label="item.siteId" >-->
|
|
<!-- {{ item.siteName }}-->
|
|
<!-- </el-checkbox>-->
|
|
<!-- </el-checkbox-group>-->
|
|
<el-radio-group v-model="form.siteIds" >
|
|
<el-radio v-for="(item,index) in siteList" :key="index+'zdListSearch'" :label="item.siteId">
|
|
{{ item.siteName }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="设备" prop="categoryName" :rules="[{ required: true, message: '请选择设备' }]">
|
|
<el-radio-group v-model="form.categoryName" >
|
|
<el-radio v-for="(key,index) in deviceCategoryList" :key="index+'sbListSearch'" :label="key">
|
|
{{ key }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<div style="display: flex">
|
|
<el-form-item label="点位" prop="pointName" :rules="[{ required: true, message: '请输入点位' }]" style="margin-right: 50px">
|
|
<el-autocomplete
|
|
v-model="form.pointName"
|
|
placeholder="请输入点位"
|
|
clearable
|
|
:fetch-suggestions="querySearchAsync"
|
|
@select="handleSelect"
|
|
></el-autocomplete>
|
|
</el-form-item>
|
|
<el-form-item v-if="isDtdc" label="单体电池(不超过5个)" prop="child" :rules="[{ required: true, message: '请选择单体电池' }]" style="margin-right: 50px">
|
|
<el-cascader
|
|
v-model="form.child"
|
|
style="width:230px"
|
|
:props="{ multiple: true }"
|
|
:show-all-levels="false"
|
|
: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>
|
|
<el-radio :label="2">小时</el-radio>
|
|
<el-radio :label="3">天</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm">生成图表</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<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" @initDate="((e)=>form.dataRange=e||[])" @updateDate="updateDate"/>
|
|
</div>
|
|
<div style="height: 350px" id="searchChart"></div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import resize from '@/mixins/ems/resize'
|
|
import {getAllSites} from "@/api/ems/zddt";
|
|
import {getAllDeviceCategory,getPointValueList,pointFuzzyQuery,getAllBatteryIdsBySites} from '@/api/ems/search'
|
|
import DateTimeSelect from "./DateTimeSelect.vue";
|
|
export default {
|
|
name: "Search",
|
|
mixins: [resize],
|
|
components:{DateTimeSelect},
|
|
computed: {
|
|
isDtdc(){
|
|
return this.form.categoryName === '单体电池'
|
|
},
|
|
},
|
|
watch:{
|
|
'form.siteIds':{
|
|
handler(newVal){
|
|
newVal && this.isDtdc && this.getChildList()
|
|
}
|
|
},
|
|
isDtdc:{
|
|
handler(newVal){
|
|
newVal && this.form.siteIds && this.getChildList()
|
|
!newVal && (this.form.child = [])
|
|
}
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
deviceCategoryList:[],//设备列表
|
|
siteList: [],//站点列表
|
|
childOptions:[],//二级设备列表
|
|
form: {
|
|
dataRange:[],//时间选择范围
|
|
child:[],
|
|
siteIds: '',//当前选中的站点id 默认选中第一个站点
|
|
categoryName: '',//设备
|
|
pointName: '',//点位
|
|
dataUnit: 1,//横坐标
|
|
},
|
|
loading: false,
|
|
}
|
|
},
|
|
methods: {
|
|
getChildList(){
|
|
this.childOptions=[]
|
|
this.form.child=[]
|
|
const {siteIds} = this.form
|
|
getAllBatteryIdsBySites([siteIds]).then(response=>{
|
|
const data = response?.data || {};
|
|
const base = 50
|
|
let options = []
|
|
Object.entries(data).forEach(([key,value],index)=>{
|
|
if(!value) value =[]
|
|
options.push({
|
|
value: key,
|
|
label: this.siteList.find(s=>s.siteId === key)?.siteName || '',
|
|
children:[]
|
|
})
|
|
const length = value.length
|
|
const num = Math.ceil(length /base )
|
|
if(num === 0) return
|
|
for(let i = 1; i <= num; i++){
|
|
const start = (i-1)*base+1,end = i*base
|
|
options[index].children.push({
|
|
value:i,
|
|
label: `${start}-${end}`,
|
|
children:[]
|
|
})
|
|
for(let s = start;s<=Math.min(length,end);s++){
|
|
options[index].children[i-1].children.push({
|
|
value:value[s-1],
|
|
label:value[s-1]
|
|
})
|
|
}
|
|
}
|
|
})
|
|
console.log('二级设备options',options)
|
|
this.childOptions = options;
|
|
})
|
|
},
|
|
handleChildChange(data){
|
|
console.log('选择二级设备',data)
|
|
this.form.child=data
|
|
},
|
|
showLoading(){
|
|
this.chart && this.chart.showLoading()
|
|
},
|
|
hideLoading(){
|
|
this.chart && this.chart.hideLoading()
|
|
},
|
|
initChart() {
|
|
this.chart = echarts.init(document.querySelector('#searchChart'))
|
|
},
|
|
updateDate(val){
|
|
this.form.dataRange =val || []
|
|
this.getDate()
|
|
},
|
|
setOption(data) {
|
|
if(!this.chart) return
|
|
this.chart.clear()
|
|
console.log('返回的数据',data)
|
|
let dataset=[]
|
|
if(data.length>0){
|
|
data.forEach((item,index)=>{
|
|
item.deviceList.forEach(inner=>{
|
|
dataset.push({
|
|
name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${inner.deviceId}`,
|
|
type:'line',
|
|
xdata:[],
|
|
data:[]
|
|
})
|
|
const length = dataset.length
|
|
inner.pointValueList.forEach(value=>{
|
|
dataset[length-1].xdata.push(value.valueDate)
|
|
dataset[length-1].data.push(value.pointValue)
|
|
})
|
|
})
|
|
})
|
|
}else{
|
|
this.$message.warning('暂无数据')
|
|
}
|
|
console.log('图表数据',dataset)
|
|
this.chart.setOption({
|
|
legend: {
|
|
// left: 'center',
|
|
// top: '10',
|
|
},
|
|
grid: {
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
textStyle:{
|
|
color:"#333333",
|
|
},
|
|
xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: 'inside',
|
|
start: 0,
|
|
end: 100
|
|
},
|
|
{
|
|
start: 0,
|
|
end: 100
|
|
}
|
|
],
|
|
series: dataset
|
|
})
|
|
},
|
|
submitForm() {
|
|
this.getDate()
|
|
},
|
|
handleSelect(data){
|
|
this.form.pointName = data.value
|
|
},
|
|
querySearchAsync(query,cb){
|
|
console.log('查询数据',query)
|
|
if(!this.form.siteIds || !this.form.categoryName){
|
|
this.$message({
|
|
type: 'warning',
|
|
message: '请先选择站点和设备',
|
|
})
|
|
return cb([])
|
|
}
|
|
pointFuzzyQuery({
|
|
siteIds:[this.form.siteIds],
|
|
categoryName:this.form.categoryName,
|
|
pointName:query,
|
|
}).then(response => {
|
|
const data = response?.data || []
|
|
cb(data.map(item => {
|
|
return {name: item, value: item}
|
|
}))
|
|
})
|
|
},
|
|
// 获取所有设备
|
|
getDeviceCategory(){
|
|
return getAllDeviceCategory().then(response => {
|
|
this.deviceCategoryList=response?.data || []
|
|
})
|
|
},
|
|
getZdList() {
|
|
return getAllSites().then(response => {
|
|
this.siteList = response.data || []
|
|
}).finally(() => {
|
|
})
|
|
},
|
|
getDate(){
|
|
this.$refs.form.validate(valid => {
|
|
if(valid){
|
|
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,dataRange:[start='',end=''],child}=this.form
|
|
let siteDeviceMap={}
|
|
child.forEach(([first,second,third])=>{
|
|
if(siteDeviceMap[first]){
|
|
siteDeviceMap[first].push(third)
|
|
}else{
|
|
siteDeviceMap[first]=[]
|
|
siteDeviceMap[first].push(third)
|
|
}
|
|
})
|
|
let startDate,endDate
|
|
if(start && dataUnit===3){
|
|
// startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
|
startDate = start + ' 00:00:00'
|
|
}else{
|
|
startDate=start
|
|
}
|
|
if(end && dataUnit===3){
|
|
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
|
endDate = end + ' 00:00:00'
|
|
}else{
|
|
endDate=end
|
|
}
|
|
|
|
getPointValueList({siteIds:[siteIds],dataUnit,categoryName,pointName,startDate,endDate,siteDeviceMap}).then(response => {
|
|
this.setOption(response?.data || [])
|
|
}).finally(()=>{
|
|
this.loading = false
|
|
})
|
|
}
|
|
})
|
|
},
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
mounted() {
|
|
this.loading= true
|
|
this.$nextTick(()=>{
|
|
this.initChart()
|
|
Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(()=>this.loading=false)
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|