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

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

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