414 lines
12 KiB
Vue
414 lines
12 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-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" @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-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-autocomplete
|
|
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>-->
|
|
</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">
|
|
<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>
|
|
</span>
|
|
<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>
|
|
</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 = []);
|
|
},
|
|
},
|
|
"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: [], //二级设备列表
|
|
form: {
|
|
dataRange: [], //时间选择范围
|
|
child: [],
|
|
siteIds: "", //当前选中的站点id 默认选中第一个站点
|
|
categoryName: "", //设备
|
|
pointName: "", //点位
|
|
dataUnit: 1, //横坐标
|
|
},
|
|
loading: false,
|
|
};
|
|
},
|
|
methods: {
|
|
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 = [];
|
|
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个");
|
|
}
|
|
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;
|
|
}
|
|
if (end && dataUnit === 3) {
|
|
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
|
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;
|
|
});
|
|
}
|
|
});
|
|
},
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return;
|
|
}
|
|
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)
|
|
);
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|