feat(ems):优化字典数据获取方式并调整图表布局
- 将多个组件中的字典数据获取方式从 dicts 属性改为 computed 计算属性 - 统一使用 useDict 方法返回的具体字段值，提高代码一致性 - 调整部分图表组件的 grid.top 属性值，优化图表展示效果 - 在 baseEnergyPrice 组件中将 energyId 默认值设为 null -为 reportPointSteam 模块新增增删改查 API 接口 - 修复多个组件中按钮图标与文字之间的空格问题 - 更新表单查询区域的 label-width 样式配置 - 移除 baseEnergyType 组件中的注释代码块master
parent
b272406007
commit
463bd95b33
@ -1,400 +0,0 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-row :gutter="28">
|
||||
<el-col :span="4" :xs="24">
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="workUnitName"
|
||||
placeholder="请输入物联网设备名称"
|
||||
clearable
|
||||
|
||||
prefix-icon="Search"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-tree
|
||||
:data="monitorInfoOptions"
|
||||
:props="monitorProps"
|
||||
ref="tree"
|
||||
show-checkbox
|
||||
node-key="code"
|
||||
:check-strictly="true"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
@check="handleNodeClick">
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="19" :xs="24">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"
|
||||
label-width="100px"
|
||||
>
|
||||
<!-- <el-form-item label="计量设备编号" prop="monitorCode">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.monitorCode"-->
|
||||
<!-- placeholder="请输入计量设备编号"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="采集时间">
|
||||
<el-date-picker
|
||||
v-model="daterangeCollectTime"
|
||||
style="width: 340px"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="datetimerange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <div v-for="item in list" class="chart">-->
|
||||
<!-- <Chart ref="Chart1" style="width: 100%;height: 100%" :chartOption="getChart(item)"/>-->
|
||||
<!-- <div class="title">{{item.monitorName}}</div>-->
|
||||
<!-- </div>-->
|
||||
<div class="chart">
|
||||
<Chart ref="Chart1" style="width: 100%;height: 100%" :chartOption="getChart()"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="TemperatureHumidityMonitoring3">
|
||||
import { ref, reactive, watch, onMounted, getCurrentInstance } from 'vue';
|
||||
import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo';
|
||||
import { iotInstantMonitoring } from '@/api/ems/report/TemperatureHumidityMonitoring';
|
||||
import { parseTime } from '@/utils/ruoyi';
|
||||
import Chart from '@/components/chart.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import type { ElTree } from 'element-plus';
|
||||
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
|
||||
const tree = ref<InstanceType<typeof ElTree>>();
|
||||
const queryFormRef = ref();
|
||||
|
||||
const list = ref<any[]>([]);
|
||||
const monitorInfoOptions = ref<any[]>([]);
|
||||
const workUnitName = ref<string>();
|
||||
const daterangeCollectTime = ref<string[]>([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
|
||||
const monitorProps = {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
};
|
||||
|
||||
const queryParams = reactive({
|
||||
monitorId: null,
|
||||
collectTime: null,
|
||||
params: {}
|
||||
});
|
||||
|
||||
watch(workUnitName, (val) => {
|
||||
tree.value?.filter(val);
|
||||
});
|
||||
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
queryParams.params = {};
|
||||
if (daterangeCollectTime.value && daterangeCollectTime.value.length > 0) {
|
||||
queryParams.params['beginCollectTime'] = daterangeCollectTime.value[0];
|
||||
queryParams.params['endCollectTime'] = daterangeCollectTime.value[1];
|
||||
}
|
||||
getChart();
|
||||
}
|
||||
|
||||
function handleQuery() {
|
||||
getList();
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
queryParams.monitorId = null;
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
function getTreeselect() {
|
||||
getMonitorInfoTree({ monitorTypeList: [5,6,7,8,9], monitorType: proxy.$route.query.monitorType }).then(response => {
|
||||
monitorInfoOptions.value = response.data;
|
||||
});
|
||||
}
|
||||
|
||||
function filterNode(value: string, data: any) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
}
|
||||
|
||||
async function handleNodeClick(a: any, datas: any) {
|
||||
const { data } = await iotInstantMonitoring({ monitorCodeList: datas.checkedKeys.toString() });
|
||||
list.value = data;
|
||||
}
|
||||
|
||||
function getChart(e?: any) {
|
||||
list: [],
|
||||
//下拉树List
|
||||
baseMonitorInfoOptions: [],
|
||||
//左侧树结构List
|
||||
monitorInfoOptions: [],
|
||||
workUnitName: undefined,
|
||||
//左侧树结构 检索设备名称
|
||||
selectMonitorName: null,
|
||||
//计量设备信息
|
||||
baseMonitorInfoList: [],
|
||||
// 采集方式时间范围
|
||||
daterangeCollectTime: [],
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 电实时数据表格数据
|
||||
dataList: [],
|
||||
// 弹出层标题
|
||||
title: '',
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
monitorId: null,
|
||||
collectTime: null,
|
||||
tempreture: null,
|
||||
humidity: null,
|
||||
illuminance: null,
|
||||
noise: null,
|
||||
concentration: null,
|
||||
recordTime: null,
|
||||
glys: null,
|
||||
zxyg: null,
|
||||
activePower: null,
|
||||
reactivePower: null,
|
||||
collectType: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
monitorProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
objId: [
|
||||
{required: true, message: '编号不能为空', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
columns: [
|
||||
{key: 0, label: `主键标识`, visible: false},
|
||||
{key: 1, label: `计量设备编号`, visible: true},
|
||||
{key: 2, label: `采集时间`, visible: true},
|
||||
{key: 3, label: `温度`, visible: true},
|
||||
{key: 4, label: `湿度`, visible: true},
|
||||
{key: 5, label: `照度`, visible: true},
|
||||
{key: 6, label: `噪声`, visible: true},
|
||||
{key: 7, label: `硫化氢浓度`, visible: true},
|
||||
{key: 8, label: `记录时间`, visible: true},
|
||||
{key: 9, label: `报警类型`, visible: true},
|
||||
{key: 10, label: ``, visible: true},
|
||||
{key: 11, label: ``, visible: false},
|
||||
{key: 12, label: ``, visible: false},
|
||||
{key: 13, label: ``, visible: true},
|
||||
{key: 14, label: ``, visible: true}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const nowDate = parseTime(new Date(), '{y}-{m}-{d}')
|
||||
this.daterangeCollectTime[0] = nowDate + ' 00:00:00'
|
||||
this.daterangeCollectTime[1] = nowDate + ' 23:59:59'
|
||||
this.getTreeselect()
|
||||
this.getList()
|
||||
},
|
||||
watch: {
|
||||
// 根据名称筛选计量设备树
|
||||
workUnitName(val) {
|
||||
this.$refs.tree.filter(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 转换计量设备信息数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children
|
||||
}
|
||||
return {
|
||||
id: node.monitorId,
|
||||
label: node.monitorName,
|
||||
children: node.children
|
||||
}
|
||||
},
|
||||
/** 查询电实时数据列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.queryParams.params = {}
|
||||
if (null != this.daterangeCollectTime && '' != this.daterangeCollectTime) {
|
||||
this.queryParams.params['beginCollectTime'] = this.daterangeCollectTime[0]
|
||||
this.queryParams.params['endCollectTime'] = this.daterangeCollectTime[1]
|
||||
}
|
||||
console.log(this.monitorInfoOptions)
|
||||
this.getChart()
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
dialogOpen.value = false
|
||||
this.reset()
|
||||
},
|
||||
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
objId: null,
|
||||
monitorId: null,
|
||||
collectTime: null,
|
||||
recordTime: null,
|
||||
collectType: 1
|
||||
}
|
||||
this.resetForm('form')
|
||||
},
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.queryParams.monitorId = null
|
||||
this.resetForm('queryForm')
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('ems/record/recordIOTInstant/export', {
|
||||
...this.queryParams
|
||||
}, `recordIOTInstant_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
|
||||
/** 查询计量设备信息下拉树结构 */
|
||||
getTreeselect() {
|
||||
getMonitorInfoTree({
|
||||
monitorTypeList: [5, 6, 7, 8, 9],
|
||||
monitorType: this.$route.query.monitorType
|
||||
}).then(response => {
|
||||
this.monitorInfoOptions = response.data
|
||||
})
|
||||
},
|
||||
|
||||
/** 筛选节点 */
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.label.indexOf(value) !== -1
|
||||
},
|
||||
|
||||
/** 节点单击事件 */
|
||||
async handleNodeClick(a, datas) {
|
||||
// console.log(datas.checkedKeys)
|
||||
const {data} = await iotInstantMonitoring({monitorCodeList: datas.checkedKeys.toString()})
|
||||
this.list = data
|
||||
// console.log(data)
|
||||
// this.queryParams.monitorTypeList = type
|
||||
// this.queryParams.monitorId = data.code
|
||||
// this.selectMonitorName = data.label
|
||||
// this.handleQuery()
|
||||
},
|
||||
|
||||
/** 物联网设备曲线 */
|
||||
getChart(e) {
|
||||
// if(!e)return
|
||||
let option = {
|
||||
title: {
|
||||
text: "Mouse Beautiful",
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
fontSize: 25,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "liquidFill",
|
||||
data: [0.7, 0.8, 0.75, 0.21, 0.2, 0.13, 0.1],
|
||||
radius: "80%",
|
||||
waveLength: "90%",
|
||||
waveHeight: "10",
|
||||
amplitude: 10,
|
||||
outline: {show: false},
|
||||
waveAnimation: false,
|
||||
backgroundStyle: {
|
||||
color: "#333",
|
||||
borderColor: "#fff",
|
||||
borderWidth: 1,
|
||||
shadowColor: "rgba(0, 0, 0, 0.4)",
|
||||
shadowBlur: 20,
|
||||
},
|
||||
//path代码粘贴到此处,代码的多少取决于图形的复杂度
|
||||
shape: "path://M281.674 253.424c11.553-14.585 24.288-28.14 38.208-40.267l-68.978-69.013c-10.828-10.867-28.404-10.867-39.275 0-10.831 10.831-10.831 28.404 0 39.235l70.046 70.043zM506.013 142.469c0.268 0 0.494 0 0.802 0 9.109 0 18.109 0.571 26.955 1.487l0-93.986c0-15.327-12.432-27.757-27.76-27.757s-27.721 12.429-27.721 27.757l0 93.968c8.846-0.895 17.842-1.469 26.956-1.469 0.27 0 0.534 0 0.762 0zM730.414 253.388l69.971-70.007c10.866-10.831 10.866-28.404 0-39.235-10.794-10.867-28.405-10.867-39.277 0l-69.018 69.013c13.958 12.123 26.695 25.664 38.324 40.227zM213.494 450.225c0-13.403 1.07-26.519 2.633-39.483l-98.682 0c-15.289 0-27.722 12.432-27.722 27.757 0 15.328 12.434 27.757 27.722 27.757l96.393 0c-0.229-5.28-0.345-10.581-0.345-16.033zM894.563 410.745l-98.643 0c1.6 12.964 2.633 26.082 2.633 39.483 0 5.45-0.115 10.753-0.305 16.033l96.315 0c15.332 0 27.722-12.429 27.722-27.757s-12.39-27.757-27.722-27.757zM745.017 638.262c-11.286 16.547-23.218 30.843-34.695 43.77l50.787 50.829c10.868 10.831 28.483 10.831 39.277 0 10.866-10.867 10.866-28.404 0-39.275l-55.37-55.324zM211.627 693.585c-10.831 10.867-10.831 28.404 0 39.275 10.868 10.831 28.448 10.831 39.275 0l50.83-50.863c-11.475-12.889-23.412-27.222-34.699-43.731l-55.403 55.324zM760.039 450.225c0.037-57.556-19.138-110.785-51.438-153.414-28.33-37.442-66.806-66.802-111.379-84.036l0.229-1.222-19.026-5.586c-14.798-4.29-30.051-7.265-45.605-8.867l-2.211-0.246-0.075 0-0.079-0.019c-7.623-0.724-15.557-1.279-23.83-1.279l-1.218 0c-8.276 0-16.207 0.557-23.833 1.279l-0.115 0.019-2.286 0.246c-15.535 1.6-30.791 4.575-45.549 8.867l-18.416 5.374 0.19 1.222c-44.802 17.214-83.505 46.651-111.99 84.244-32.258 42.628-51.438 95.854-51.438 153.414 0 41.274 7.132 75.207 18.227 103.29 16.661 42.114 42.094 70.559 62.533 92.138 10.22 10.754 19.22 19.941 25.317 27.795 6.254 7.892 9.265 13.995 10.141 18.837 4.459 23.565 4.917 53.306 4.917 60.854l0 2.174c0 34.085 27.609 61.617 61.659 61.655l142.51 0c34.092-0.037 61.659-27.609 61.659-61.655l0-2.097c-0.037-7.474 0.458-37.291 4.919-60.893 0.608-3.278 2.058-7.017 4.917-11.591 4.88-7.97 14.11-17.883 25.548-29.819 17.083-17.959 38.815-40.604 56.091-72.805 17.312-32.161 29.703-73.706 29.626-127.882zM701.813 537.676c-13.614 34.336-34.053 57.575-53.763 78.391-9.841 10.411-19.487 20.095-27.911 30.812-8.311 10.562-15.745 22.65-18.606 37.481-5.377 28.94-5.607 59.978-5.638 68.862 0 1.181 0 1.828 0 2.096-0.037 10.295-8.314 18.606-18.608 18.606l-142.51 0c-5.223 0-9.761-2.059-13.194-5.45-3.391-3.434-5.412-7.934-5.412-13.154 0-0.268 0-0.953 0-2.172-0.037-8.957-0.306-39.921-5.682-68.783-1.828-9.797-5.834-18.571-10.674-26.348-8.579-13.612-19.559-24.819-30.889-36.832-17.116-17.842-35.232-37.119-49.341-63.41-14.07-26.309-24.517-59.745-24.557-107.54 0.037-47.947 15.862-91.95 42.706-127.427 26.845-35.442 64.595-62.209 108.175-75.246l5.377-1.638c10.524-2.708 21.315-4.861 32.429-6.026l0.075 0 2.06-0.229c6.519-0.627 12.847-1.03 19.103-1.066l1.105 0.115 1.106-0.076c6.212 0 12.579 0.42 19.063 1.03l-0.079 0 2.137 0.229 0.037 0c11.093 1.163 21.887 3.277 32.372 6.026l5.451 1.638c43.582 13.037 81.329 39.807 108.175 75.246 26.801 35.478 42.666 79.482 42.666 127.427 0.003 36.409-6.094 64.511-15.169 87.446zM532.782 197.107l0.079 0zM479.17 197.107l0 0c0 0 0.037 0 0.075 0l-0.075 0zM576.706 833.825l-141.369 0c-14.604 0-26.499 11.822-26.499 26.539 0 14.564 11.899 26.465 26.499 26.465l141.369 0c14.604 0 26.499-11.899 26.499-26.465 0-14.721-11.899-26.539-26.499-26.539zM576.706 900.704l-141.369 0c-14.604 0-26.499 11.857-26.499 26.464 0 14.678 11.899 26.539 26.499 26.539l141.369 0c14.604 0 26.499-11.857 26.499-26.539 0-14.605-11.899-26.464-26.499-26.464zM518.406 968.116l-72.805 0c0 0.801-0.154 1.561-0.154 2.404 0 14.643 22.498 26.499 43.297 26.499l34.546 0c20.818 0 43.277-11.857 43.277-26.499 0-0.837-0.115-1.6-0.115-2.404l-48.044 0z",
|
||||
color: ["#f6ad40"],
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '20',
|
||||
textStyle: {
|
||||
fontSize: 26,
|
||||
color: "#000",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
return option;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const nowDate = parseTime(new Date(), '{y}-{m}-{d}');
|
||||
daterangeCollectTime.value[0] = nowDate + ' 00:00:00';
|
||||
daterangeCollectTime.value[1] = nowDate + ' 23:59:59';
|
||||
getTreeselect();
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.chart {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
height: 40vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart .title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 1vw;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chart2 {
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue