修改大屏嵌入路由

This commit is contained in:
GGJ
2024-02-27 16:21:27 +08:00
parent f51acd7623
commit 122c3e2198
6 changed files with 59 additions and 27 deletions

View File

@@ -1,5 +1,5 @@
<template>
<el-select v-model="interval" style="min-width: 90px;width: 90px; margin-right: 10px" @change="timeChange">
<el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-date-picker
@@ -22,7 +22,7 @@
<script lang="ts" setup>
import { DArrowLeft, VideoPause, DArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { ref, onMounted, nextTick } from 'vue'
const interval = ref(3)
const timeFlag = ref(1)
@@ -31,13 +31,13 @@ const disabledPicker = ref(true)
const timeValue = ref()
const backDisabled = ref(false)
const preDisabled = ref(false)
const timeOptions = [
const timeOptions: any = ref([
{ label: '年份', value: 1 },
{ label: '季度', value: 2 },
{ label: '月份', value: 3 },
{ label: '周', value: 4 },
{ label: '自定义', value: 5 }
]
])
const shortcuts = [
{
text: '最近一周',
@@ -447,7 +447,11 @@ const NowgetEndTime = () => {
let endTime = year + sep + month + sep + date
return endTime
}
defineExpose({ timeValue, interval, timeFlag })
const setTimeOptions = (list: any) => {
timeOptions.value = list
}
defineExpose({ timeValue, interval, timeFlag, setTimeOptions })
</script>
<style scoped>

View File

@@ -153,7 +153,12 @@ const onComSearch = async () => {
const onResetForm = () => {
tableStore.onTableAction('reset', {})
}
defineExpose({ onComSearch, areaRef })
const setDatePicker = (list:any) => {
datePickerRef.value.setTimeOptions(list)
}
defineExpose({ onComSearch, areaRef, setDatePicker })
</script>
<style scoped lang="scss">

View File

@@ -1,31 +1,31 @@
<template>
<div class='nav-tabs' ref='tabScrollbarRef'>
<div class="nav-tabs" ref="tabScrollbarRef">
<div
v-for='(item, idx) in navTabs.state.tabsView'
@click='onTab(item)'
@contextmenu.prevent='onContextmenu(item, $event)'
class='ba-nav-tab'
v-for="(item, idx) in navTabs.state.tabsView"
@click="onTab(item)"
@contextmenu.prevent="onContextmenu(item, $event)"
class="ba-nav-tab"
:class="navTabs.state.activeIndex == idx ? 'active' : ''"
:ref='tabsRefs.set'
:key='idx'
:ref="tabsRefs.set"
:key="idx"
>
{{ item.meta.title }}
<transition @after-leave='selectNavTab(tabsRefs[navTabs.state.activeIndex])' name='el-fade-in'>
<transition @after-leave="selectNavTab(tabsRefs[navTabs.state.activeIndex])" name="el-fade-in">
<Icon
v-show='navTabs.state.tabsView.length > 1'
class='close-icon'
@click.stop='closeTab(item)'
size='15'
name='el-icon-Close'
v-show="navTabs.state.tabsView.length > 1"
class="close-icon"
@click.stop="closeTab(item)"
size="15"
name="el-icon-Close"
/>
</transition>
</div>
<!-- <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>-->
<!-- <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>-->
</div>
<Contextmenu ref='contextmenuRef' :items='state.contextmenuItems' @contextmenuItemClick='onContextmenuItem' />
<Contextmenu ref="contextmenuRef" :items="state.contextmenuItems" @contextmenuItemClick="onContextmenuItem" />
</template>
<script setup lang='ts'>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter, onBeforeRouteUpdate, type RouteLocationNormalized } from 'vue-router'
import { useConfig } from '@/stores/config'
@@ -85,7 +85,7 @@ const onContextmenu = (menu: RouteLocationNormalized, el: MouseEvent) => {
}
// tab 激活状态切换
const selectNavTab = function(dom: HTMLDivElement) {
const selectNavTab = function (dom: HTMLDivElement) {
if (!dom) {
return false
}
@@ -169,7 +169,7 @@ const onContextmenuItem = async (item: ContextmenuItemClickEmitArg) => {
}
}
const updateTab = function(newRoute: RouteLocationNormalized) {
const updateTab = function (newRoute: RouteLocationNormalized) {
// 添加tab
navTabs.addTab(newRoute)
// 激活当前tab
@@ -181,7 +181,10 @@ const updateTab = function(newRoute: RouteLocationNormalized) {
}
onBeforeRouteUpdate(async to => {
updateTab(to)
updateTab(to)
})
onMounted(() => {
@@ -190,7 +193,7 @@ onMounted(() => {
})
</script>
<style scoped lang='scss'>
<style scoped lang="scss">
.dark {
.close-icon {
color: v-bind('config.getColorVal("headerBarTabColor")') !important;

View File

@@ -20,6 +20,8 @@ router.beforeEach((to, from, next) => {
if (to.path == '/login' || to.path == '/404') {
// 登录或者注册才可以往下进行
next()
} else if (to.path == '/admin/center/homePage') {
window.open(window.location.origin + '/homePage')
} else {
// 获取 token
const adminInfo = useAdminInfo()

View File

@@ -0,0 +1,11 @@
<template>
<div> </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
</script>
<style lang="scss" scoped>
</style>

View File

@@ -1,6 +1,6 @@
<template>
<div class="default-main">
<TableHeader datePicker>
<TableHeader datePicker ref="TableHeaderRef">
<template #select>
<el-form-item label="筛选">
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />
@@ -45,6 +45,7 @@ defineOptions({
const dialogAnalysis = ref(false)
const AnalysisData = ref([])
const tableRef = ref()
const TableHeaderRef = ref()
const tableStore = new TableStore({
url: '/advance-boot/process/queryEventsAssPage',
method: 'POST',
@@ -101,6 +102,12 @@ const tableStore = new TableStore({
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
TableHeaderRef.value.setDatePicker([
{ label: '年份', value: 1 },
{ label: '季度', value: 2 },
{ label: '月份', value: 3 },
{ label: '周', value: 4 }
])
})
//分析记录管理
const analysis = () => {