add:通风系统数据引入/素材样式修改/引入组件改造
This commit is contained in:
chenpingsen
@@ -80,16 +80,16 @@
|
||||
<div
|
||||
style="position: absolute"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 10.6%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 12.6%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
}">
|
||||
<boxModel :dataSource="item" />
|
||||
</div>
|
||||
<img
|
||||
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 1.5%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 2%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 3%)',
|
||||
transform: 'rotateY(180deg)',
|
||||
}"
|
||||
src="../image/liftState/lift/line.png" />
|
||||
@@ -100,7 +100,7 @@
|
||||
style="position: absolute"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' + 4.3%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
}">
|
||||
<boxModel :dataSource="item" />
|
||||
</div>
|
||||
@@ -108,23 +108,22 @@
|
||||
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' + 1.5%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
transform: 'rotate(90deg,180deg)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 3%)',
|
||||
}"
|
||||
src="../image/liftState/lift/line.png" />
|
||||
</template>
|
||||
<img
|
||||
style="width: 42px; height: 42px; position: absolute"
|
||||
style="width: 38px; height: 38px; position: absolute; cursor: pointer; z-index: 9"
|
||||
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
|
||||
src="../image/ventilationSystem/fan.png" />
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 弹窗操控 -->
|
||||
<!-- 排风扇 - 弹窗 -->
|
||||
<a-drawer
|
||||
v-if="selectIndex === 4 && visible"
|
||||
:visible="selectIndex === 4"
|
||||
class="drawer-fan"
|
||||
class="drawer-fan drawer-item"
|
||||
:width="496"
|
||||
:forceRender="preload"
|
||||
placement="right"
|
||||
@@ -133,16 +132,15 @@
|
||||
id="drawer"
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
|
||||
<!-- 左侧抽屉的关闭按钮 -->
|
||||
<div
|
||||
class="drawer-box-out"
|
||||
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
|
||||
@click="toggleDrawer">
|
||||
<div class="drawer-box-out" @click="toggleDrawer">
|
||||
<double-right-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="控制面板"> <fanControl /> </a-tab-pane>
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<fanControl :treeData="treeData" :type="`排风扇`" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<fanPlant />
|
||||
<fanPlant :status="stateList" :type="3" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
||||
</a-tabs>
|
||||
@@ -154,7 +152,7 @@
|
||||
<div
|
||||
style="position: absolute"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 15.1%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 16.1%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
||||
}">
|
||||
<boxModel :dataSource="item" />
|
||||
@@ -162,24 +160,24 @@
|
||||
<img
|
||||
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 1.5%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 2%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
transform: 'rotateY(180deg)',
|
||||
}"
|
||||
src="../image/liftState/lift/line.png" />
|
||||
|
||||
<img
|
||||
style="width: 42px; height: 42px; position: absolute"
|
||||
style="width: 38px; height: 38px; position: absolute; z-index: 9"
|
||||
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
|
||||
src="../image/ventilationSystem/airCurtain.png" />
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 弹窗操控 -->
|
||||
<!-- 风幕机 - 弹窗 -->
|
||||
<a-drawer
|
||||
v-if="selectIndex === 5 && visible"
|
||||
:visible="selectIndex === 5"
|
||||
class="drawer-fan"
|
||||
class="drawer-fan drawer-item"
|
||||
:width="496"
|
||||
:forceRender="preload"
|
||||
placement="right"
|
||||
@@ -189,15 +187,16 @@
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
|
||||
:mask="false">
|
||||
<!-- 左侧抽屉的关闭按钮 -->
|
||||
<div
|
||||
class="drawer-box-out"
|
||||
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
|
||||
@click="toggleDrawer">
|
||||
<div class="drawer-box-out" @click="toggleDrawer">
|
||||
<double-right-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="控制面板"> 风幕机 </a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<fanControl :treeData="treeData" :type="`风幕机`" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<fanPlant :status="stateList" :type="4" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
@@ -207,7 +206,7 @@
|
||||
<div
|
||||
style="position: absolute"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 10.6%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 11%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
||||
}">
|
||||
<boxModel :dataSource="item" />
|
||||
@@ -215,24 +214,24 @@
|
||||
<img
|
||||
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 1.5%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 2%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
transform: 'rotateY(180deg)',
|
||||
}"
|
||||
src="../image/liftState/lift/line.png" />
|
||||
|
||||
<img
|
||||
style="width: 42px; height: 42px; position: absolute"
|
||||
style="width: 38px; height: 38px; position: absolute; z-index: 9"
|
||||
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
|
||||
src="../image/ventilationSystem/windowIcon.png" />
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 弹窗操控 -->
|
||||
<!-- 电动窗 - 弹窗 -->
|
||||
<a-drawer
|
||||
v-if="selectIndex === 6 && visible"
|
||||
:visible="selectIndex === 6"
|
||||
class="drawer-fan"
|
||||
class="drawer-fan drawer-item"
|
||||
:width="496"
|
||||
:forceRender="preload"
|
||||
placement="right"
|
||||
@@ -242,15 +241,16 @@
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
|
||||
:mask="false">
|
||||
<!-- 左侧抽屉的关闭按钮 -->
|
||||
<div
|
||||
class="drawer-box-out"
|
||||
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
|
||||
@click="toggleDrawer">
|
||||
<div class="drawer-box-out" @click="toggleDrawer">
|
||||
<double-right-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="控制面板"> 电动窗 </a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<fanControl :treeData="treeData" :type="`电动窗`" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<fanPlant :status="stateList" :type="5" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
@@ -276,8 +276,30 @@
|
||||
import fanControl from './components/fanControl.vue';
|
||||
import fanPlant from './components/fanPlant.vue';
|
||||
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { getEnum } from '/@/api';
|
||||
import { ventilating } from '/@/api/ventilatingSystem';
|
||||
// 全局变量
|
||||
import { items } from '/@/store/item';
|
||||
// 定位数据
|
||||
import { devicePosition1, devicePosition2, devicePosition3 } from './devicePosition';
|
||||
|
||||
//图例
|
||||
// 父子组件交互 =======================================================================
|
||||
|
||||
// 全局变量
|
||||
const state = items();
|
||||
// 状态枚举
|
||||
const stateList = ref([]);
|
||||
// 获得状态枚举
|
||||
const getStateEnum = async () => {
|
||||
let enumData = await getEnum({ params: { enumType: 'PlanExecuteStatus' } });
|
||||
stateList.value = enumData.data;
|
||||
};
|
||||
|
||||
// 左侧侧边栏及交互 ====================================================================
|
||||
|
||||
// 图例
|
||||
const legend = ref([
|
||||
{ url: temperature, name: '温度' },
|
||||
{ url: humidity, name: '湿度' },
|
||||
@@ -289,24 +311,102 @@
|
||||
]);
|
||||
// 选择的图例
|
||||
const selectIndex = ref(0);
|
||||
//选择table
|
||||
// 图例切换事件
|
||||
const selectLegend = (item: any, index: any) => {
|
||||
const name = item.name;
|
||||
if (selectIndex.value === index) {
|
||||
return;
|
||||
} else if (name == '排风扇') {
|
||||
// 获得树形结构
|
||||
getTree(1, index);
|
||||
// 获得设备图例
|
||||
getDevice(1);
|
||||
} else if (name == '风幕机') {
|
||||
getTree(2, index);
|
||||
getDevice(2);
|
||||
} else if (name == '电动窗') {
|
||||
getTree(3, index);
|
||||
getDevice(3);
|
||||
// 修改
|
||||
} else {
|
||||
selectIndex.value = index;
|
||||
}
|
||||
};
|
||||
|
||||
// 抽屉相关（排风扇 / 风幕机 / 电动窗） ==================================================
|
||||
|
||||
// 选择table
|
||||
const activeKey = ref('1');
|
||||
// 展示
|
||||
// 抽屉的展示状态
|
||||
const visible = ref(true);
|
||||
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
|
||||
const preload = ref(true);
|
||||
// 抽屉 - 开关事件
|
||||
const toggleDrawer = () => {
|
||||
console.log('xxxx');
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
//选择方法
|
||||
const selectLegend = (item: any, index: any) => {
|
||||
if (selectIndex.value !== index) {
|
||||
selectIndex.value = index;
|
||||
|
||||
// 抽屉中tab1 - 控制面板 =================================================================
|
||||
|
||||
const treeData = ref([]);
|
||||
// 获取tab1的树形结构
|
||||
const getTree = async (type: number, index: number) => {
|
||||
// 切换时默认选择tab1
|
||||
activeKey.value = '1';
|
||||
let url;
|
||||
if (type == 1) {
|
||||
url = ventilating.getTree1;
|
||||
} else if (type == 2) {
|
||||
url = ventilating.getTree2;
|
||||
} else {
|
||||
url = ventilating.getTree3;
|
||||
}
|
||||
http.get(url, { projectId: state.projectId, siteId: state.siteId }).then((res) => {
|
||||
const data = res.data;
|
||||
treeData.value = data[0].childList;
|
||||
selectIndex.value = index;
|
||||
});
|
||||
};
|
||||
//温度数组
|
||||
const getDevice = async (type: number) => {
|
||||
// 切换时默认选择tab1
|
||||
activeKey.value = '1';
|
||||
let arr: Array<Object> = [];
|
||||
let url = '';
|
||||
let deviceType = '';
|
||||
if (type == 1) {
|
||||
// 设备类型
|
||||
deviceType = 'fan';
|
||||
// 位置数据
|
||||
arr = devicePosition1;
|
||||
// 请求地址
|
||||
url = ventilating.getDevice1;
|
||||
} else if (type == 2) {
|
||||
deviceType = 'airCurtain';
|
||||
arr = devicePosition2;
|
||||
url = ventilating.getDevice2;
|
||||
} else if (type == 3) {
|
||||
deviceType = 'window';
|
||||
arr = devicePosition3;
|
||||
url = ventilating.getDevice3;
|
||||
}
|
||||
http.get(url, { projectId: state.projectId, siteId: state.siteId, floor: 1 }).then((res) => {
|
||||
const data = res.data;
|
||||
data.forEach((item: any, index: number) => {
|
||||
let obj = arr[index];
|
||||
item.styleText = obj.textObject;
|
||||
item.lineType = obj.lineType;
|
||||
item.type = deviceType;
|
||||
});
|
||||
if (type == 1) {
|
||||
fanData.value = data;
|
||||
} else if (type == 2) {
|
||||
airCurtainData.value = data;
|
||||
} else if (type == 3) {
|
||||
windowData.value = data;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 温度数组
|
||||
const sensorData = ref([
|
||||
{
|
||||
title: '多功能传感器A',
|
||||
@@ -325,7 +425,7 @@
|
||||
url: sunYellow,
|
||||
},
|
||||
]);
|
||||
//湿度数组
|
||||
// 湿度数组
|
||||
const humidityData = ref([
|
||||
{
|
||||
title: '多功能传感器A',
|
||||
@@ -344,7 +444,7 @@
|
||||
url: humidity,
|
||||
},
|
||||
]);
|
||||
//PM2.5数组
|
||||
// PM2.5数组
|
||||
const pmData = ref([
|
||||
{
|
||||
title: '多功能传感器A',
|
||||
@@ -363,7 +463,7 @@
|
||||
url: PM25,
|
||||
},
|
||||
]);
|
||||
//二氧化碳 浓度
|
||||
// 二氧化碳 浓度
|
||||
const CO2Data = ref([
|
||||
{
|
||||
title: '多功能传感器A',
|
||||
@@ -382,98 +482,102 @@
|
||||
url: CO2,
|
||||
},
|
||||
]);
|
||||
//排风扇
|
||||
// 排风扇
|
||||
const fanData = ref([
|
||||
{
|
||||
title: '排风扇',
|
||||
styleText: { left: '43.2%', bottom: '77.8%' },
|
||||
type: 'fan',
|
||||
lineType: '1',
|
||||
},
|
||||
{
|
||||
title: '排风扇',
|
||||
styleText: { left: '50%', bottom: '77.8%' },
|
||||
type: 'fan',
|
||||
lineType: '2',
|
||||
},
|
||||
{
|
||||
title: '排风扇',
|
||||
styleText: { left: '41.2%', bottom: '27.8%' },
|
||||
type: 'fan',
|
||||
lineType: '1',
|
||||
},
|
||||
{
|
||||
title: '排风扇',
|
||||
styleText: { left: '51.2%', bottom: '27.8%' },
|
||||
type: 'fan',
|
||||
lineType: '2',
|
||||
},
|
||||
// {
|
||||
// title: '排风扇',
|
||||
// styleText: { left: '43.2%', bottom: '77.8%' },
|
||||
// type: 'fan',
|
||||
// lineType: '1',
|
||||
// },
|
||||
// {
|
||||
// title: '排风扇',
|
||||
// styleText: { left: '50%', bottom: '77.8%' },
|
||||
// type: 'fan',
|
||||
// lineType: '2',
|
||||
// },
|
||||
// {
|
||||
// title: '排风扇',
|
||||
// styleText: { left: '41.2%', bottom: '27.8%' },
|
||||
// type: 'fan',
|
||||
// lineType: '1',
|
||||
// },
|
||||
// {
|
||||
// title: '排风扇',
|
||||
// styleText: { left: '51.2%', bottom: '27.8%' },
|
||||
// type: 'fan',
|
||||
// lineType: '2',
|
||||
// },
|
||||
]);
|
||||
// 风幕机
|
||||
const airCurtainData = ref([
|
||||
{
|
||||
title: '风幕机',
|
||||
styleText: { left: '38%', bottom: '57.8%' },
|
||||
type: 'airCurtain',
|
||||
},
|
||||
{
|
||||
title: '风幕机',
|
||||
styleText: { left: '58.5%', bottom: '57.3%' },
|
||||
type: 'airCurtain',
|
||||
},
|
||||
{
|
||||
title: '风幕机',
|
||||
styleText: { left: '64.2%', bottom: '22.8%' },
|
||||
type: 'airCurtain',
|
||||
},
|
||||
// {
|
||||
// title: '风幕机',
|
||||
// styleText: { left: '38%', bottom: '57.8%' },
|
||||
// type: 'airCurtain',
|
||||
// },
|
||||
// {
|
||||
// title: '风幕机',
|
||||
// styleText: { left: '58.5%', bottom: '57.3%' },
|
||||
// type: 'airCurtain',
|
||||
// },
|
||||
// {
|
||||
// title: '风幕机',
|
||||
// styleText: { left: '64.2%', bottom: '22.8%' },
|
||||
// type: 'airCurtain',
|
||||
// },
|
||||
]);
|
||||
// 电动窗
|
||||
const windowData = ref([
|
||||
{
|
||||
title: '电动窗1',
|
||||
styleText: { left: '32%', bottom: '28%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗2',
|
||||
styleText: { left: '33.5%', bottom: '42.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗3',
|
||||
styleText: { left: '35%', bottom: '57.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗4',
|
||||
styleText: { left: '36.5%', bottom: '72.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗5',
|
||||
styleText: { left: '66%', bottom: '28%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗6',
|
||||
styleText: { left: '64%', bottom: '42.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗7',
|
||||
styleText: { left: '62%', bottom: '57.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗8',
|
||||
styleText: { left: '60%', bottom: '72.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
// {
|
||||
// title: '电动窗1',
|
||||
// styleText: { left: '32%', bottom: '28%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗2',
|
||||
// styleText: { left: '33.5%', bottom: '42.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗3',
|
||||
// styleText: { left: '35%', bottom: '57.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗4',
|
||||
// styleText: { left: '36.5%', bottom: '72.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗5',
|
||||
// styleText: { left: '66%', bottom: '28%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗6',
|
||||
// styleText: { left: '64%', bottom: '42.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗7',
|
||||
// styleText: { left: '62%', bottom: '57.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗8',
|
||||
// styleText: { left: '60%', bottom: '72.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
]);
|
||||
onMounted(() => {});
|
||||
onMounted(() => {
|
||||
// 获得枚举
|
||||
getStateEnum();
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import url('../style/color.less');
|
||||
.legend-box {
|
||||
width: 80px;
|
||||
height: 100%;
|
||||
@@ -562,7 +666,7 @@
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
position: fixed;
|
||||
right: 466px;
|
||||
right: 495px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
|
||||
Reference in New Issue
Block a user