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

综合查询切换站点、设备清空点位

Browse Source
This commit is contained in:
baicai
2025-09-27 17:37:23 +08:00
parent fb4f9d4abc
commit 9dcf2a6c12
1 changed files with 289 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,56 +1,86 @@
<template>
<div v-loading="loading" class="ems-dashboard-editor-container" style="background-color: #ffffff">
<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: '请选择站点' }]"
label="站点"
prop="siteIds"
:rules="[{ required: true, message: '请选择站点' }]"
>
<el-radio-group v-model="form.siteIds" >
<el-radio v-for="(item,index) in siteList" :key="index+'zdListSearch'" :label="item.siteId">
<el-radio-group v-model="form.siteIds" @input="changeSiteIds">
<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">
<el-form-item
label="设备"
prop="categoryName"
:rules="[{ required: true, message: '请选择设备' }]"
>
<el-radio-group v-model="form.categoryName" @input="changeSiteIds">
<el-radio
v-for="(key, index) in deviceCategoryList"
:key="index + 'sbListSearch'"
:label="key"
>
{{ key }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="isDtdc" label="单体电池(不超过5个)" prop="child" :rules="[{ required: true, message: '请选择单体电池' }]">
<el-form-item
v-if="isDtdc"
label="单体电池(不超过5个)"
prop="child"
:rules="[{ required: true, message: '请选择单体电池' }]"
>
<el-cascader
v-model="form.child"
style="width:400px"
:props="{ multiple: true }"
:show-all-levels="false"
:options="childOptions"
@change="handleChildChange"></el-cascader>
v-model="form.child"
style="width: 400px"
:props="{ multiple: true }"
:show-all-levels="false"
:options="childOptions"
@change="handleChildChange"
></el-cascader>
</el-form-item>
<div style="display: flex">
<el-form-item label="点位" prop="pointName" :rules="[{ required: true, message: '请输入点位' }]" style="margin-right: 50px">
<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"
v-model="form.pointName"
placeholder="请输入点位"
clearable
:fetch-suggestions="querySearchAsync"
@select="handleSelect"
></el-autocomplete>
</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>-->
<!-- <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">
<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">
<el-radio-group v-model="form.dataUnit">
@ -59,7 +89,12 @@
<el-radio :label="3">天</el-radio>
</el-radio-group>
</span>
<date-time-select ref="dateTimeSelect" :data-unit="form.dataUnit" @initDate="((e)=>form.dataRange=e||[])" @updateDate="updateDate"/>
<date-time-select
ref="dateTimeSelect"
:data-unit="form.dataUnit"
@initDate="(e) => (form.dataRange = e || [])"
@updateDate="updateDate"
/>
</div>
<div style="height: 350px" id="searchChart"></div>
</el-card>
@ -67,274 +102,312 @@
</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 * 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},
components: { DateTimeSelect },
computed: {
isDtdc(){
return this.form.categoryName === '单体电池'
isDtdc() {
return this.form.categoryName === "单体电池";
},
},
watch:{
'form.siteIds':{
handler(newVal){
newVal && this.isDtdc && this.getChildList()
}
watch: {
"form.siteIds": {
handler(newVal) {
newVal && this.isDtdc && this.getChildList();
},
},
isDtdc:{
handler(newVal){
newVal && this.form.siteIds && this.getChildList()
!newVal && (this.form.child = [])
}
isDtdc: {
handler(newVal) {
newVal && this.form.siteIds && this.getChildList();
!newVal && (this.form.child = []);
},
},
'form.dataUnit':{
handler(newVal,oldVal){
console.log('wacth到了dataUnit的变化',newVal,oldVal)
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init()
this.getDate()
})
"form.dataUnit": {
handler(newVal, oldVal) {
console.log("wacth到了dataUnit的变化", newVal, oldVal);
this.$nextTick(() => {
this.$refs.dateTimeSelect.init();
this.getDate();
});
// this.submitForm()
},
}
},
},
data() {
return {
chart: null,
deviceCategoryList:[],//设备列表
siteList: [],//站点列表
childOptions:[],//二级设备列表
deviceCategoryList: [], //设备列表
siteList: [], //站点列表
childOptions: [], //二级设备列表
form: {
dataRange:[],//时间选择范围
child:[],
siteIds: '',//当前选中的站点id 默认选中第一个站点
categoryName: '',//设备
pointName: '',//点位
dataUnit: 1,//横坐标
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=>{
changeSiteIds(val) {
console.log("切换站点或设备清空点位", val);
val && (this.form.pointName = "");
},
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 =[]
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
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,
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]
})
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)
});
console.log("二级设备options", options);
this.childOptions = options;
})
});
},
handleChildChange(data){
console.log('选择二级设备',data)
this.form.child=data
handleChildChange(data) {
console.log("选择二级设备", data);
this.form.child = data;
},
showLoading(){
this.chart && this.chart.showLoading()
showLoading() {
this.chart && this.chart.showLoading();
},
hideLoading(){
this.chart && this.chart.hideLoading()
hideLoading() {
this.chart && this.chart.hideLoading();
},
initChart() {
this.chart = echarts.init(document.querySelector('#searchChart'))
this.chart = echarts.init(document.querySelector("#searchChart"));
},
updateDate(val){
this.form.dataRange =val || []
this.getDate()
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=>{
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('暂无数据')
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)
console.log("图表数据", dataset);
this.chart.setOption({
legend: {
// left: 'center',
// top: '10',
},
grid: {
containLabel: true
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
textStyle:{
color:"#333333",
textStyle: {
color: "#333333",
},
xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
xAxis: { type: "category", data: dataset?.[0]?.xdata || [] },
yAxis: {
type: 'value',
type: "value",
},
dataZoom: [
{
type: 'inside',
type: "inside",
start: 0,
end: 100
end: 100,
},
{
start: 0,
end: 100
}
end: 100,
},
],
series: dataset
})
series: dataset,
});
},
submitForm() {
this.getDate()
this.getDate();
},
handleSelect(data){
this.form.pointName = data.value
handleSelect(data) {
this.form.pointName = data.value;
},
querySearchAsync(query,cb){
console.log('查询数据',query)
if(!this.form.siteIds || !this.form.categoryName){
querySearchAsync(query, cb) {
console.log("查询数据", query);
if (!this.form.siteIds || !this.form.categoryName) {
this.$message({
type: 'warning',
message: '请先选择站点和设备',
})
return cb([])
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}
}))
})
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 || []
})
getDeviceCategory() {
return getAllDeviceCategory().then((response) => {
this.deviceCategoryList = response?.data || [];
});
},
getZdList() {
return getAllSites().then(response => {
this.siteList = response.data || []
}).finally(() => {
})
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('请输入正确的点位');
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个');
if (
this.isDtdc &&
(this.form.child.length === 0 || this.form.child.length > 5)
) {
return this.$message.error("请选择单体电池且不能超过5个");
}
const{siteIds,dataUnit,categoryName,pointName,dataRange:[start='',end=''],child}=this.form
if(!start || !end) return this.$message.error('请选择时间');
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){
const {
siteIds,
dataUnit,
categoryName,
pointName,
dataRange: [start = "", end = ""],
child,
} = this.form;
if (!start || !end) return this.$message.error("请选择时间");
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
startDate = start + " 00:00:00";
} else {
startDate = start;
}
if(end && dataUnit===3){
if (end && dataUnit === 3) {
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
endDate = end + ' 00:00:00'
}else{
endDate=end
endDate = end + " 00:00:00";
} else {
endDate = end;
}
this.loading = true
getPointValueList({siteIds:[siteIds],dataUnit,categoryName,pointName,startDate,endDate,siteDeviceMap}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>{
this.loading = false
this.loading = true;
getPointValueList({
siteIds: [siteIds],
dataUnit,
categoryName,
pointName,
startDate,
endDate,
siteDeviceMap,
})
.then((response) => {
this.setOption(response?.data || []);
})
.finally(() => {
this.loading = false;
});
}
})
});
},
},
beforeDestroy() {
if (!this.chart) {
return
return;
}
this.chart.dispose()
this.chart = null
this.chart.dispose();
this.chart = null;
},
mounted() {
this.loading= true
this.$nextTick(()=>{
this.initChart()
this.$refs.dateTimeSelect.init()
Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(()=>this.loading=false)
})
}
}
this.loading = true;
this.$nextTick(() => {
this.initChart();
this.$refs.dateTimeSelect.init();
Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(
() => (this.loading = false)
);
});
},
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>