fks-yangshouda
3 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> |
<template> |
||||
<a-tabs v-model:activeKey="activeKey" style="height: 5%"> |
<div style="background: #f2f6fd; width: 100%; height: 100%"> |
||||
<a-tab-pane key="1" tab="综合数据" /> |
<div style="display: flex"> |
||||
<a-tab-pane key="2" tab="历史数据" force-render /> |
<a-tabs v-model:activeKey="activeKey" style="height: 5%; width: 100%; background: #ffffff"> |
||||
<a-tab-pane key="3" tab="平均数据" /> |
<a-tab-pane key="1" tab="综合数据" /> |
||||
</a-tabs> |
<a-tab-pane key="2" tab="历史数据" force-render /> |
||||
|
<a-tab-pane key="3" tab="平均数据" /> |
||||
<aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" /> |
</a-tabs> |
||||
<history-data v-if="activeKey == '2'" /> |
<a-button |
||||
<average-data v-if="activeKey == '3'" /> |
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> |
</template> |
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { ref } from 'vue'; |
import { ref, onMounted } from 'vue'; |
||||
import aggregateData from './aggregateData/index.vue'; |
import aggregateData from './aggregateData/index.vue'; |
||||
import historyData from './historyData/index.vue'; |
import historyData from './historyData/index.vue'; |
||||
import averageData from './averageData/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 aggregateDataRef = ref(); |
||||
|
const historyDataRef = ref(); |
||||
|
const averageDataRef = ref(); |
||||
|
|
||||
var activeKey = ref('1'); |
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({ |
defineOptions({ |
||||
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效 |
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> |
</script> |
||||
<style lang="less" scoped></style> |
<style lang="less" scoped></style> |
||||
|
|||||
Loading…
Reference in new issue