|
|
@@ -37,269 +37,269 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { computed, ref, watch } from 'vue';
|
|
|
-import { router } from '/@/router';
|
|
|
-import History from './detail/history.vue';
|
|
|
+ import { computed, ref, watch } from 'vue';
|
|
|
+ import { router } from '/@/router';
|
|
|
+ import History from './detail/history.vue';
|
|
|
|
|
|
-// 类型定义
|
|
|
-interface MenuItem {
|
|
|
- name: string;
|
|
|
- path: string;
|
|
|
-}
|
|
|
-interface FieldNames {
|
|
|
- label?: string;
|
|
|
- value?: string;
|
|
|
- children?: string;
|
|
|
-}
|
|
|
+ // 类型定义
|
|
|
+ interface MenuItem {
|
|
|
+ name: string;
|
|
|
+ path: string;
|
|
|
+ }
|
|
|
+ interface FieldNames {
|
|
|
+ label?: string;
|
|
|
+ value?: string;
|
|
|
+ children?: string;
|
|
|
+ }
|
|
|
|
|
|
-// Props
|
|
|
-const props = defineProps({
|
|
|
- optionValue: {
|
|
|
- type: String,
|
|
|
- default: '',
|
|
|
- },
|
|
|
- fieldNames: {
|
|
|
- type: Object as () => FieldNames,
|
|
|
- default: () => ({}),
|
|
|
- },
|
|
|
- options: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
- Type: {
|
|
|
- type: String,
|
|
|
- default: '',
|
|
|
- },
|
|
|
-});
|
|
|
+ // Props
|
|
|
+ const props = defineProps({
|
|
|
+ optionValue: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ fieldNames: {
|
|
|
+ type: Object as () => FieldNames,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ Type: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ });
|
|
|
|
|
|
-// 自定义事件
|
|
|
-const emit = defineEmits<{
|
|
|
- change: [value: string];
|
|
|
- 'open-history': [];
|
|
|
-}>();
|
|
|
+ // 自定义事件
|
|
|
+ const emit = defineEmits<{
|
|
|
+ change: [value: string];
|
|
|
+ 'open-history': [];
|
|
|
+ }>();
|
|
|
|
|
|
-// 响应式数据
|
|
|
-const currentTitleValue = ref(props.optionValue);
|
|
|
-const visible = ref(false);
|
|
|
-const selectRef = ref(); // 选择器实例
|
|
|
+ // 响应式数据
|
|
|
+ const currentTitleValue = ref(props.optionValue);
|
|
|
+ const visible = ref(false);
|
|
|
+ const selectRef = ref(); // 选择器实例
|
|
|
|
|
|
-// 导航菜单配置
|
|
|
-const menuList: MenuItem[] = [
|
|
|
- {
|
|
|
- name: '首页',
|
|
|
- path: '/micro-vent-3dModal/configurable/belt/fireS/home',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '详情监控页',
|
|
|
- path: '/belt/fireS/home',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '灾变模拟分析',
|
|
|
- path: 'micro-vent-3dModal/dashboard/analysis?type=sysMonitor&deviceType=sysfireTunnel&sysID=2028657172566073346&sysType=leatherr',
|
|
|
- },
|
|
|
-];
|
|
|
-// 下拉框样式
|
|
|
-const dropdownStyle = {
|
|
|
- background: 'transparent',
|
|
|
- borderBottom: '1px solid #ececec66',
|
|
|
- backdropFilter: 'blur(50px)',
|
|
|
- color: '#fff',
|
|
|
-};
|
|
|
+ // 导航菜单配置
|
|
|
+ const menuList: MenuItem[] = [
|
|
|
+ {
|
|
|
+ name: '首页',
|
|
|
+ path: '/micro-vent-3dModal/configurable/belt/fireS/home',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '详情监控页',
|
|
|
+ path: '/belt/fireS/home',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '灾变模拟分析',
|
|
|
+ path: 'micro-vent-3dModal/dashboard/analysis?type=sysMonitor&deviceType=sysfireTunnel&sysID=2028657172566073346&sysType=leatherr',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ // 下拉框样式
|
|
|
+ const dropdownStyle = {
|
|
|
+ background: 'transparent',
|
|
|
+ borderBottom: '1px solid #ececec66',
|
|
|
+ backdropFilter: 'blur(50px)',
|
|
|
+ color: '#fff',
|
|
|
+ };
|
|
|
|
|
|
-// 当前路由(计算属性)
|
|
|
-const currentPath = computed(() => {
|
|
|
- return router.currentRoute.value.fullPath.split('?')[0];
|
|
|
-});
|
|
|
-// 监听父组件传入的 optionValue 同步更新
|
|
|
-watch(
|
|
|
- () => props.optionValue,
|
|
|
- (val) => {
|
|
|
- currentTitleValue.value = val;
|
|
|
- }
|
|
|
-);
|
|
|
-// 判断导航是否选中
|
|
|
-const isActive = (menuPath: string): boolean => {
|
|
|
- if (!menuPath) return false;
|
|
|
- const menuRoutePath = menuPath.split('?')[0];
|
|
|
- return currentPath.value.startsWith(menuRoutePath);
|
|
|
-};
|
|
|
+ // 当前路由(计算属性)
|
|
|
+ const currentPath = computed(() => {
|
|
|
+ return router.currentRoute.value ? router.currentRoute.value.fullPath.split('?')[0] : router.currentRoute.fullPath.split('?')[0];
|
|
|
+ });
|
|
|
+ // 监听父组件传入的 optionValue 同步更新
|
|
|
+ watch(
|
|
|
+ () => props.optionValue,
|
|
|
+ (val) => {
|
|
|
+ currentTitleValue.value = val;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ // 判断导航是否选中
|
|
|
+ const isActive = (menuPath: string): boolean => {
|
|
|
+ if (!menuPath) return false;
|
|
|
+ const menuRoutePath = menuPath.split('?')[0];
|
|
|
+ return currentPath.value.startsWith(menuRoutePath);
|
|
|
+ };
|
|
|
|
|
|
-// 导航点击跳转
|
|
|
-const handleNavClick = (item: MenuItem) => {
|
|
|
- router.push(item.path);
|
|
|
-};
|
|
|
-// 打开/关闭历史数据弹窗
|
|
|
-const openModel = () => {
|
|
|
- visible.value = !visible.value;
|
|
|
- emit('open-history');
|
|
|
-};
|
|
|
-// 下拉选择器变化
|
|
|
-const handleTitleChange = (value: string) => {
|
|
|
- currentTitleValue.value = value;
|
|
|
- emit('change', value);
|
|
|
-};
|
|
|
+ // 导航点击跳转
|
|
|
+ const handleNavClick = (item: MenuItem) => {
|
|
|
+ router.push(item.path);
|
|
|
+ };
|
|
|
+ // 打开/关闭历史数据弹窗
|
|
|
+ const openModel = () => {
|
|
|
+ visible.value = !visible.value;
|
|
|
+ emit('open-history');
|
|
|
+ };
|
|
|
+ // 下拉选择器变化
|
|
|
+ const handleTitleChange = (value: string) => {
|
|
|
+ currentTitleValue.value = value;
|
|
|
+ emit('change', value);
|
|
|
+ };
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
-@import '/@/design/vent/modal.less';
|
|
|
+ @import '/@/design/vent/modal.less';
|
|
|
|
|
|
-.@{ventSpace}-select-dropdown.drop {
|
|
|
- background-color: transparent !important;
|
|
|
+ .@{ventSpace}-select-dropdown.drop {
|
|
|
+ background-color: transparent !important;
|
|
|
|
|
|
- .@{ventSpace}-select-item-option-selected,
|
|
|
- .@{ventSpace}-select-item-option-active {
|
|
|
- width: 100% !important;
|
|
|
+ .@{ventSpace}-select-item-option-selected,
|
|
|
+ .@{ventSpace}-select-item-option-active {
|
|
|
+ width: 100% !important;
|
|
|
|
|
|
- background-color: #ffffff33 !important;
|
|
|
- }
|
|
|
- .@{ventSpace}-select-item {
|
|
|
- font-size: 20px !important;
|
|
|
- color: inherit;
|
|
|
- &:hover {
|
|
|
background-color: #ffffff33 !important;
|
|
|
}
|
|
|
- }
|
|
|
- .@{ventSpace}-select-tree {
|
|
|
- .@{ventSpace}-select-tree-treenode {
|
|
|
+ .@{ventSpace}-select-item {
|
|
|
+ font-size: 20px !important;
|
|
|
color: inherit;
|
|
|
+ &:hover {
|
|
|
+ background-color: #ffffff33 !important;
|
|
|
+ }
|
|
|
}
|
|
|
- .@{ventSpace}-select-tree-switcher-icon {
|
|
|
- color: inherit;
|
|
|
+ .@{ventSpace}-select-tree {
|
|
|
+ .@{ventSpace}-select-tree-treenode {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+ .@{ventSpace}-select-tree-switcher-icon {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@import '/@/design/theme.less';
|
|
|
-@ventSpace: zxm;
|
|
|
+ @import '/@/design/theme.less';
|
|
|
+ @ventSpace: zxm;
|
|
|
|
|
|
-.vent-custom-header {
|
|
|
- --image-vent-header1: url('/@/assets/images/vent/vent-header1.png');
|
|
|
- --image-select-bg: url('/@/assets/images/vent/home/select-bg.png');
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- z-index: 9999;
|
|
|
- height: 60px;
|
|
|
- pointer-events: auto;
|
|
|
-
|
|
|
- .vent-home-header {
|
|
|
+ .vent-custom-header {
|
|
|
+ --image-vent-header1: url('/@/assets/images/vent/vent-header1.png');
|
|
|
+ --image-select-bg: url('/@/assets/images/vent/home/select-bg.png');
|
|
|
width: 100%;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- background: var(--image-vent-header1) no-repeat;
|
|
|
- height: 89px;
|
|
|
- background-size: contain;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .header-icon {
|
|
|
- margin-top: 45px;
|
|
|
- }
|
|
|
- .header-text {
|
|
|
- position: fixed;
|
|
|
- top: 5px;
|
|
|
- color: #fff;
|
|
|
- font-size: 32px;
|
|
|
- font-family: 'ysbtFont';
|
|
|
- background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
|
|
|
- -webkit-background-clip: text;
|
|
|
- color: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .container-title {
|
|
|
- width: 380px;
|
|
|
- height: 34px;
|
|
|
- left: 20px;
|
|
|
- background: var(--image-select-bg) no-repeat;
|
|
|
- background-size: contain;
|
|
|
- padding: 0 0 0 20px;
|
|
|
- font-size: 20px;
|
|
|
- pointer-events: auto;
|
|
|
position: relative;
|
|
|
z-index: 9999;
|
|
|
- top: 70px;
|
|
|
+ height: 60px;
|
|
|
+ pointer-events: auto;
|
|
|
|
|
|
- .title-select {
|
|
|
- width: 340px;
|
|
|
- position: absolute;
|
|
|
+ .vent-home-header {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
top: 0;
|
|
|
+ background: var(--image-vent-header1) no-repeat;
|
|
|
+ height: 89px;
|
|
|
+ background-size: contain;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .header-icon {
|
|
|
+ margin-top: 45px;
|
|
|
+ }
|
|
|
+ .header-text {
|
|
|
+ position: fixed;
|
|
|
+ top: 5px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32px;
|
|
|
+ font-family: 'ysbtFont';
|
|
|
+ background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .nav {
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- display: flex;
|
|
|
- left: 20px;
|
|
|
- gap: 30px;
|
|
|
- top: 15px;
|
|
|
- pointer-events: auto;
|
|
|
+ .container-title {
|
|
|
+ width: 380px;
|
|
|
+ height: 34px;
|
|
|
+ left: 20px;
|
|
|
+ background: var(--image-select-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ padding: 0 0 0 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ pointer-events: auto;
|
|
|
+ position: relative;
|
|
|
+ z-index: 9999;
|
|
|
+ top: 70px;
|
|
|
|
|
|
- .nav-item {
|
|
|
- flex: 1;
|
|
|
- max-width: 120px;
|
|
|
- height: 35px;
|
|
|
- line-height: 35px;
|
|
|
- padding: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-bottom: 10px;
|
|
|
- text-align: center;
|
|
|
- background: url('/@/assets/images/beltFire/titleNav.png') no-repeat center center;
|
|
|
- background-size: 100% 90%;
|
|
|
- cursor: pointer;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .nav-item.active {
|
|
|
- background: url('/@/assets/images/beltFire/titleNavActive.png') no-repeat center center !important;
|
|
|
- background-size: 100% 190% !important;
|
|
|
+ .title-select {
|
|
|
+ width: 340px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .history-nav {
|
|
|
- position: fixed;
|
|
|
- top: 15px;
|
|
|
- right: 230px;
|
|
|
- pointer-events: auto;
|
|
|
+ .nav {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ left: 20px;
|
|
|
+ gap: 30px;
|
|
|
+ top: 15px;
|
|
|
+ pointer-events: auto;
|
|
|
|
|
|
- .nav-item {
|
|
|
- width: 120px;
|
|
|
- height: 35px;
|
|
|
- line-height: 35px;
|
|
|
- padding: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-bottom: 10px;
|
|
|
- text-align: center;
|
|
|
- background: url('/@/assets/images/beltFire/titleNav.png') no-repeat center center;
|
|
|
- background-size: 100% 90%;
|
|
|
- cursor: pointer;
|
|
|
- color: #fff;
|
|
|
+ .nav-item {
|
|
|
+ flex: 1;
|
|
|
+ max-width: 120px;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ text-align: center;
|
|
|
+ background: url('/@/assets/images/beltFire/titleNav.png') no-repeat center center;
|
|
|
+ background-size: 100% 90%;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .nav-item.active {
|
|
|
+ background: url('/@/assets/images/beltFire/titleNavActive.png') no-repeat center center !important;
|
|
|
+ background-size: 100% 190% !important;
|
|
|
+ }
|
|
|
}
|
|
|
- .nav-item.active {
|
|
|
- background: url('/@/assets/images/beltFire/titleNavActive.png') no-repeat center center !important;
|
|
|
- background-size: 100% 190% !important;
|
|
|
+
|
|
|
+ .history-nav {
|
|
|
+ position: fixed;
|
|
|
+ top: 15px;
|
|
|
+ right: 230px;
|
|
|
+ pointer-events: auto;
|
|
|
+
|
|
|
+ .nav-item {
|
|
|
+ width: 120px;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ text-align: center;
|
|
|
+ background: url('/@/assets/images/beltFire/titleNav.png') no-repeat center center;
|
|
|
+ background-size: 100% 90%;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .nav-item.active {
|
|
|
+ background: url('/@/assets/images/beltFire/titleNavActive.png') no-repeat center center !important;
|
|
|
+ background-size: 100% 190% !important;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-:deep(.zxm-select) {
|
|
|
- width: 100%;
|
|
|
+ :deep(.zxm-select) {
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .@{ventSpace}-select-selector {
|
|
|
- background: transparent !important;
|
|
|
- border: none !important;
|
|
|
- box-shadow: none !important;
|
|
|
+ .@{ventSpace}-select-selector {
|
|
|
+ background: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+ box-shadow: none !important;
|
|
|
|
|
|
- .zxm-select-selection-item {
|
|
|
- color: #fff !important;
|
|
|
- font-size: 20px;
|
|
|
- margin-left: 20px !important;
|
|
|
+ .zxm-select-selection-item {
|
|
|
+ color: #fff !important;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-left: 20px !important;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .@{ventSpace}-select-arrow {
|
|
|
- color: #fff !important;
|
|
|
+ .@{ventSpace}-select-arrow {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</style>
|