fks-yangshouda
4 months ago
8 changed files with 1463 additions and 691 deletions
File diff suppressed because one or more lines are too long
@ -1,26 +1,447 @@ |
|||
<template> |
|||
<a-tabs v-model:activeKey="activeKey" style="height: 5%"> |
|||
<a-tab-pane key="1" tab="综合数据" /> |
|||
<a-tab-pane key="2" tab="历史数据" force-render /> |
|||
<a-tab-pane key="3" tab="平均数据" /> |
|||
</a-tabs> |
|||
|
|||
<aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" /> |
|||
<history-data v-if="activeKey == '2'" /> |
|||
<average-data v-if="activeKey == '3'" /> |
|||
<div style="background: #f2f6fd; width: 100%; height: 100%"> |
|||
<div style="display: flex"> |
|||
<a-tabs v-model:activeKey="activeKey" style="height: 5%; width: 100%; background: #ffffff"> |
|||
<a-tab-pane key="1" tab="综合数据" /> |
|||
<a-tab-pane key="2" tab="历史数据" force-render /> |
|||
<a-tab-pane key="3" tab="平均数据" /> |
|||
</a-tabs> |
|||
<a-button |
|||
type="primary" |
|||
style="position: absolute; margin-right: 30px; margin-top: 10px; right: 30px" |
|||
@click="configurePoint"> |
|||
配置监测点位 |
|||
</a-button> |
|||
</div> |
|||
|
|||
<aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" /> |
|||
<history-data ref="historyDataRef" v-if="activeKey == '2'" /> |
|||
<average-data ref="averageDataRef" v-if="activeKey == '3'" /> |
|||
</div> |
|||
|
|||
<a-modal |
|||
:visible="openModal" |
|||
title="配置监测点位" |
|||
style="width: 65%" |
|||
@ok="handleOk" |
|||
@cancel="closeOpenUpload"> |
|||
<div style="display: flex"> |
|||
<div style="width: 15%"> |
|||
<a-tabs |
|||
v-model:activeKey="typeValue" |
|||
tab-position="left" |
|||
@tabScroll="callback" |
|||
@change="queryDeviceArea"> |
|||
<a-tab-pane v-for="item in typeList" :key="item.value" :tab="item.label" /> |
|||
</a-tabs> |
|||
</div> |
|||
<div style="width: 85%; height: 100%"> |
|||
<a-table |
|||
:columns="tableColumns" |
|||
:data-source="data" |
|||
bordered |
|||
:pagination="false" |
|||
rowKey="deviceInfoCode" |
|||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"> |
|||
<template #bodyCell="{ text, column, record }"> |
|||
<template v-if="column.dataIndex === 'useFlag'"> |
|||
<a-switch |
|||
:checked="text" |
|||
:checked-value="1" |
|||
:unCheckedValue="0" |
|||
@change="(checked) => updateShowed(record)" /> |
|||
</template> |
|||
</template> |
|||
<template #title> |
|||
<div |
|||
style=" |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
"> |
|||
<div style="display: flex; align-items: center; width: 85%"> |
|||
<div style="width: 10%">数据列表</div> |
|||
<!-- <a-select |
|||
v-model:value="typeValue" |
|||
placeholder="请选择环境参数" |
|||
style="width: 15%" |
|||
:options="typeList" /> --> |
|||
<!-- <a-tree-select |
|||
v-model:value="quyuvalue" |
|||
style="width: 35%; margin-left: 10px" |
|||
:tree-data="treeData2" |
|||
:field-names="{ |
|||
children: 'childList', |
|||
label: 'name', |
|||
value: 'id', |
|||
}" |
|||
tree-checkable |
|||
allow-clear |
|||
placeholder="请选择区域" |
|||
tree-node-filter-prop="label" |
|||
:maxTagCount="1" /> --> |
|||
<a-cascader |
|||
:options="treeData2" |
|||
v-model:value="quyuvalue" |
|||
placeholder="请选择所属区域" |
|||
:field-names="{ |
|||
children: 'childList', |
|||
label: 'name', |
|||
value: 'id', |
|||
}" |
|||
multiple |
|||
max-tag-count="responsive" /> |
|||
<a-select |
|||
v-model:value="useFlag" |
|||
placeholder="请选择监测状态" |
|||
style="width: 20%; margin-left: 1%" |
|||
:options="useFlagList" /> |
|||
<a-input |
|||
v-model:value="areaName" |
|||
placeholder="请输入设备名称" |
|||
style="width: 20%; margin-left: 1%" /> |
|||
<!-- <a-select |
|||
v-model:value="frequencyValue" |
|||
placeholder="请选择采集频率" |
|||
style="width: 15%; margin-left: 10px" |
|||
:options="frequencyOptions" /> --> |
|||
<!-- <a-date-picker style="width: 15%; margin-left: 10px" v-model:value="timeValue" /> --> |
|||
<a-button style="margin-left: 10px" @click="resetting"> 重置 </a-button> |
|||
<a-button type="primary" style="margin-left: 10px" @click="queryDeviceInfoListPage"> |
|||
搜索 |
|||
</a-button> |
|||
</div> |
|||
<!-- <a-button type="primary"> 导出 </a-button> --> |
|||
</div> |
|||
<div> |
|||
<a-divider /> |
|||
<a-button |
|||
type="primary" |
|||
size="small" |
|||
@click="startOrEnd(true)" |
|||
:disabled="selectedRowKeys.length == 0"> |
|||
批量开启 |
|||
</a-button> |
|||
<a-button |
|||
type="primary" |
|||
size="small" |
|||
style="margin-left: 10px" |
|||
@click="startOrEnd(false)" |
|||
:disabled="selectedRowKeys.length == 0"> |
|||
批量关闭 |
|||
</a-button> |
|||
</div> |
|||
</template> |
|||
</a-table> |
|||
<a-pagination |
|||
:current="queryParams.pageNum" |
|||
:total="total" |
|||
:page-size="queryParams.pageSize" |
|||
style="display: flex; justify-content: center; margin-top: 16px" |
|||
:show-size-changer="true" |
|||
:show-quick-jumper="true" |
|||
@change="onChange" /> |
|||
</div> |
|||
</div> |
|||
</a-modal> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue'; |
|||
import { ref, onMounted } from 'vue'; |
|||
import aggregateData from './aggregateData/index.vue'; |
|||
import historyData from './historyData/index.vue'; |
|||
import averageData from './averageData/index.vue'; |
|||
import { Pagination, TabsProps, TableColumnType, TreeSelectProps } from 'ant-design-vue'; |
|||
import { environmentMonitor } from '/@/api/monitor'; |
|||
import { http } from '/nerv-lib/util'; |
|||
import { dict, getEnum } from '/@/api'; |
|||
|
|||
const total = ref<number>(); |
|||
const queryParams = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
}); |
|||
const aggregateDataRef = ref(); |
|||
const historyDataRef = ref(); |
|||
const averageDataRef = ref(); |
|||
|
|||
var activeKey = ref('1'); |
|||
var typeValue = ref(); |
|||
const openModal = ref<boolean>(false); |
|||
|
|||
const orgId = ref(''); |
|||
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
|||
orgId.value = result; |
|||
|
|||
defineOptions({ |
|||
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效 |
|||
components: { |
|||
'a-pagination': Pagination, |
|||
}, |
|||
}); |
|||
|
|||
const typeList = ref(); |
|||
|
|||
const quyuvalue = ref<string[]>([]); |
|||
const useFlag = ref<Number>(); |
|||
const useFlagList = ref(); |
|||
useFlagList.value = [ |
|||
{ |
|||
value: 0, |
|||
label: '关闭', |
|||
}, |
|||
{ |
|||
value: 1, |
|||
label: '开启', |
|||
}, |
|||
]; |
|||
const areaName = ref<string>(); |
|||
let tableColumns = ref<TableColumnType[]>([]); |
|||
const treeData2 = ref<TreeSelectProps['treeData']>([]); |
|||
const data = ref(); |
|||
|
|||
const selectedRowKeys = ref([]); |
|||
const onSelectChange = (selectedRowKey: string | number[]) => { |
|||
console.log('selectedRowKeys changed: ', selectedRowKey); |
|||
selectedRowKeys.value = selectedRowKey; |
|||
}; |
|||
// 分页器 |
|||
const onChange = (pageNumber: number, size: number) => { |
|||
queryParams.value.pageNum = pageNumber; |
|||
queryParams.value.pageSize = size; |
|||
|
|||
// getTableList(); |
|||
}; |
|||
const configurePoint = () => { |
|||
openModal.value = true; |
|||
}; |
|||
// 上传凭证弹窗点击确定 |
|||
const handleOk = (e: MouseEvent) => { |
|||
console.log(e); |
|||
openModal.value = false; |
|||
}; |
|||
// 关闭上传凭证弹窗 |
|||
const closeOpenUpload = () => { |
|||
openModal.value = false; |
|||
}; |
|||
const callback: TabsProps['onTabScroll'] = (val) => { |
|||
console.log(val); |
|||
}; |
|||
// 重置 |
|||
const resetting = () => { |
|||
quyuvalue.value = []; |
|||
areaName.value = ''; |
|||
}; |
|||
// 修改是否显示状态 |
|||
const updateShowed = (record: any) => { |
|||
debugger; |
|||
let url = ''; |
|||
if (record.useFlag == 0) { |
|||
record.useFlag = 1; |
|||
url = environmentMonitor.startUpDevice; |
|||
} else { |
|||
record.useFlag = 0; |
|||
url = environmentMonitor.stopDevice; |
|||
} |
|||
let params = [ |
|||
{ |
|||
orgId: orgId.value, |
|||
code: typeValue.value, // 点位flag |
|||
deviceInfoCode: record.deviceInfoCode, |
|||
}, |
|||
]; |
|||
http.post(url, params).then((res) => { |
|||
debugger; |
|||
}); |
|||
}; |
|||
// 批量修改是否显示状态 |
|||
const startOrEnd = (flag: Boolean) => { |
|||
let url = ''; |
|||
if (flag) { |
|||
url = environmentMonitor.startUpDevice; |
|||
} else { |
|||
url = environmentMonitor.stopDevice; |
|||
} |
|||
let params = []; |
|||
|
|||
for (let i = 0; i < selectedRowKeys.value.length; i++) { |
|||
params.push({ |
|||
orgId: orgId.value, |
|||
code: typeValue.value, // 点位flag |
|||
deviceInfoCode: selectedRowKeys.value[i], |
|||
}); |
|||
} |
|||
// let params = [ |
|||
// { |
|||
// orgId: orgId.value, |
|||
// code: typeValue.value, // 点位flag |
|||
// deviceInfoCode: record.deviceInfoCode, |
|||
// }, |
|||
// ]; |
|||
http.post(url, params).then((res) => { |
|||
selectedRowKeys.value = []; |
|||
queryDeviceInfoListPage(); |
|||
}); |
|||
}; |
|||
const queryDeviceInfoListPage = () => { |
|||
http |
|||
.post(environmentMonitor.queryDeviceInfoListPage, { |
|||
orgId: orgId.value, |
|||
pointCode: typeValue.value, //点位flag |
|||
pageNum: queryParams.value.pageNum, |
|||
pageSize: queryParams.value.pageSize, |
|||
deviceName: areaName.value, //设备名搜索 |
|||
useFlag: useFlag.value, // 是否弃用搜索 |
|||
area2: quyuvalue.value, // 地区名数组查 |
|||
}) |
|||
.then((res) => { |
|||
total.value = res.data.total; |
|||
data.value = res.data.records; |
|||
}); |
|||
}; |
|||
// 获取区域数据 |
|||
const queryDeviceArea = () => { |
|||
http |
|||
.get(environmentMonitor.queryDeviceArea, { orgId: orgId.value, point: typeValue.value }) |
|||
.then((res) => { |
|||
treeData2.value = res.data; |
|||
// if (treeData2.value && treeData2.value.length > 0) { |
|||
// quyuvalue.value = [treeData2.value[0].childList[0].id]; |
|||
// } |
|||
}); |
|||
}; |
|||
onMounted(async () => { |
|||
// 获取环境参数 |
|||
let typeData = await getEnum({ params: { enumType: 'EnvironmentTypeEnum' } }); |
|||
typeData.data.forEach((item: any) => { |
|||
item.code = item.value; |
|||
item.value = item.flag; |
|||
}); |
|||
typeList.value = typeData.data; |
|||
if (typeList.value && typeList.value.length > 0) { |
|||
typeValue.value = typeList.value[0].value; |
|||
await queryDeviceArea(); |
|||
} |
|||
|
|||
// 获取区域数据 |
|||
|
|||
// 获取左侧选项 |
|||
// typeList.value = [ |
|||
// { |
|||
// id: 1, |
|||
// value: '温度', |
|||
// }, |
|||
// { |
|||
// id: 2, |
|||
// value: 'CO2浓度', |
|||
// }, |
|||
// { |
|||
// id: 3, |
|||
// value: 'PM2.5', |
|||
// }, |
|||
// { |
|||
// id: 4, |
|||
// value: '光照度', |
|||
// }, |
|||
// { |
|||
// id: 5, |
|||
// value: 'TVOC', |
|||
// }, |
|||
// { |
|||
// id: 6, |
|||
// value: '湿度', |
|||
// }, |
|||
// ]; |
|||
// 默认选中第一个 |
|||
// pointKey.value = typeList.value[0].id; |
|||
// 表头 |
|||
tableColumns.value = [ |
|||
{ |
|||
title: '序号', |
|||
customRender: (text: any) => { |
|||
return text.index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '设备名称', |
|||
dataIndex: 'deviceName', |
|||
}, |
|||
{ |
|||
title: '设备型号', |
|||
dataIndex: 'deviceRatepay', |
|||
}, |
|||
{ |
|||
title: '设备一级区域', |
|||
dataIndex: 'device1Area', |
|||
}, |
|||
{ |
|||
title: '设备二级区域', |
|||
dataIndex: 'device2Area', |
|||
}, |
|||
{ |
|||
title: '设备详细位置', |
|||
dataIndex: 'deviceAddress', |
|||
}, |
|||
{ |
|||
title: '是否纳入计算', |
|||
dataIndex: 'useFlag', |
|||
}, |
|||
]; |
|||
// 获取区域数据 |
|||
// treeData2.value = [ |
|||
// { |
|||
// label: '办公区', |
|||
// value: '0-0', |
|||
// children: [ |
|||
// { |
|||
// label: '办公一区', |
|||
// value: '0-0-0', |
|||
// }, |
|||
// { |
|||
// label: '办公二区', |
|||
// value: '0-0-1', |
|||
// }, |
|||
// { |
|||
// label: '办公三区', |
|||
// value: '0-0-2', |
|||
// }, |
|||
// { |
|||
// label: '办公四区', |
|||
// value: '0-0-3', |
|||
// }, |
|||
// ], |
|||
// }, |
|||
// { |
|||
// label: '站厅', |
|||
// value: '0-1', |
|||
|
|||
// children: [ |
|||
// { |
|||
// label: '站厅一区', |
|||
// value: '0-1-0', |
|||
// // disabled: true, |
|||
// }, |
|||
// { |
|||
// label: '站厅二区', |
|||
// value: '0-1-1', |
|||
// }, |
|||
// { |
|||
// label: '站厅三区', |
|||
// value: '0-1-2', |
|||
// }, |
|||
// { |
|||
// label: '站厅四区', |
|||
// value: '0-1-3', |
|||
// }, |
|||
// ], |
|||
// }, |
|||
// ]; |
|||
// 获取表格数据 |
|||
// data.value = [ |
|||
// { areaName: '设备', showed: '1' }, |
|||
// { areaName: '设备', showed: '1' }, |
|||
// ]; |
|||
queryDeviceInfoListPage(); |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped></style> |
|||
|
|||
Loading…
Reference in new issue