大屏引导

src/store/index.js

@@ -36,6 +36,7 @@ export const useAppStore = defineStore('main', {
         bubble: getStoreValue('bubble') || false,
         orderServiceTipModal: getStoreValue('orderServiceTipModal') ?? 1, //0不弹出，1弹出
         isCollapse: getStoreValue('isCollapse') || false, //菜单折叠
+        isDatavTour: getStoreValue('isDatavTour') || 0, //datav引导，0开启，1关闭
         isScreenShort: false,
         barMenuName: '',
     }),
@@ -69,6 +70,7 @@ export const useAppStore = defineStore('main', {
         getScreenShort: state => state.isScreenShort,
         getOrderServiceTipModal: state => state.orderServiceTipModal,
         getCollapse: state => state.isCollapse,
+        getIsDatavTour: state => state.isDatavTour,
     },
     actions: {
         //系统信息
@@ -173,6 +175,10 @@ export const useAppStore = defineStore('main', {
             this.isCollapse = value
             setStoreValue('isCollapse', value)
         },
+        setIsDatavTour(value) {
+            this.isDatavTour = value
+            setStoreValue('isDatavTour', value)
+        },
         //清除缓存和token
         clearStoreData() {
             //清除状态
@@ -193,6 +199,7 @@ export const useAppStore = defineStore('main', {
             this.contractId = null
             this.orderServiceTipModal = null
             this.isCollapse = false
+            this.isDatavTour = 0
             //清除缓存
             clearStoreAll()
             removeToken()

src/store/modules/user.js

@@ -77,7 +77,7 @@ export const initUserConfigInfo = async () => {
     }
     const res = getObjValue(data)
     if (res?.theme) {
-        const { theme, color, opinionView } = res
+        const { theme, color, opinionView, isDatavTour } = res
         //设置主题
         store.setTheme(theme)
         //设置模式
@@ -95,12 +95,13 @@ export const initUserConfigInfo = async () => {
         }
         //设置工单服务的弹出框
         store.setOrderServiceTipModal(opinionView ?? 1)
+        store.setIsDatavTour(isDatavTour ?? 0)
         return Promise.resolve(true)
     } else {
         await userConfigSave({
             theme: appConfig?.theme || '',
             color: appConfig?.color?.name || '',
-            opinionView: 1,
+            opinionView: 1, isDatavTour: 0,
         })
         return Promise.resolve(true)
     }

src/views/home/components/gui.vue

@@ -18,7 +18,7 @@ import { onMounted, ref, watch } from 'vue'
 import guiView from './gui/guigui.vue'
 import bookView from './gui/book.vue'
 import queryApi from '~api/using/query'
-import { getArrValue } from 'js-fast-way'
+import { getArrValue, isNullES } from 'js-fast-way'
 
 const props = defineProps({
     type: {
@@ -53,6 +53,9 @@ onMounted(() => {
 const isLoading = ref(true)
 const guiViewData = ref([])
 const getGuiData = async () => {
+    if (isNullES(projectId.value)) {
+        return
+    }
     isLoading.value = true
     guiViewData.value = []
     guiItemInfo.value = {}

src/views/home/datav.vue

@@ -9,18 +9,11 @@
             </div>
             <div class="header-img absolute">
                 <img id="datav-header-img-1" :src="headerImg1" alt="头部装饰1">
-                <img class="datav-header-img-2" :src="headerImg2" alt="头部装饰2" @click="fullScreenClick">
+                <img ref="fullScreenRef" class="datav-header-img-2" :src="headerImg2" alt="头部装饰2" @click="fullScreenClick">
                 <div class="project-name-box absolute">
-                    <el-popover
-                        effect="dark"
-                        placement="bottom"
-                        :title="project?.projectName"
-                        :width="460"
-                        trigger="hover"
-                        popper-class="hc-datav-project-name-popover"
-                    >
+                    <el-popover effect="dark" placement="bottom" :title="project?.projectName" :width="460" trigger="hover" popper-class="hc-datav-project-name-popover">
                         <template #reference>
-                            <span id="project-name" @click="projectNameClick">{{ project.projectAlias?.substring(0, 10) }}</span>
+                            <span id="project-name" ref="projectNameRef" @click="projectNameClick">{{ project.projectAlias?.substring(0, 10) }}</span>
                         </template>
                         <div v-if="project?.projectGist" class="hc-datav-project-gist">{{ project?.projectGist }}</div>
                     </el-popover>
@@ -31,7 +24,7 @@
             <el-aside width="25%" class="relative">
                 <hc-body padding="0">
                     <datavCard class="aside-charts-1">
-                        <div class="title">档案分类占比统计</div>
+                        <div class="title" @click="tourOpenClick">档案分类占比统计</div>
                         <div class="content">
                             <datavClassify :datas="classifyCharts" />
                         </div>
@@ -65,7 +58,7 @@
                     <datavCard class="main-gui">
                         <div class="main-gui-header">
                             <div class="title">虚拟档案柜</div>
-                            <div class="extra">
+                            <div ref="tabsRef" class="extra">
                                 <template v-for="item in tabs" :key="item.key">
                                     <div class="tab" :class="tabKey === item.key ? 'cur' : ''" @click="tabsClick(item)">
                                         {{ item.label }}
@@ -80,6 +73,11 @@
                 </hc-body>
             </el-main>
         </el-container>
+        <el-tour v-model="tourOpen" @close="tourFinishClose">
+            <el-tour-step :target="projectNameRef" title="项目名称" description="点击这里，进入档案管理系统" />
+            <el-tour-step :target="fullScreenRef" title="是否全屏" description="点击这里切换是否全屏显示" />
+            <el-tour-step :target="tabsRef" title="数据类型" description="点击这里切换档案柜的数据类型" />
+        </el-tour>
     </el-container>
 </template>
 
@@ -88,18 +86,23 @@ import { onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAppStore } from '~src/store'
 import { initProjectContract } from '~sto/app'
+import { userConfigSave } from '~api/other'
+import { fullScreen, getArrValue, getObjValue, isNullES } from 'js-fast-way'
+import statsApi from '~api/using/stats'
+
+//组件
 import headerBg from '~ass/datav/header1.png'
 import headerImg1 from '~ass/datav/header2.svg'
 import headerImg2 from '~ass/datav/header3.svg'
 import bgImg from '~ass/datav/bg15.jpg'
+
+//组件
 import datavCard from './components/card.vue'
 import datavBorder from './components/border.vue'
 import datavProgress from './components/progress.vue'
 import datavClassify from './components/classify.vue'
 import datavPaper from './components/paper.vue'
 import datavGui from './components/gui.vue'
-import { fullScreen, getArrValue, getObjValue } from 'js-fast-way'
-import statsApi from '~api/using/stats'
 
 //初始化组合式
 const router = useRouter()
@@ -117,6 +120,10 @@ onMounted(() => {
 
 //加载
 const isLoading = ref(false)
+const fullScreenRef = ref()
+const projectNameRef = ref()
+const tabsRef = ref()
+const tourOpen = ref(false)
 
 //获取项目信息
 const project = ref({})
@@ -129,15 +136,33 @@ const setInitData = async () => {
         }
         project.value = getObjValue(store.getProjectInfo)
         const project_id = store.projectId
-        projectId.value = project_id
-        //获取接口数据
-        getClassifyChartsData(project_id)
-        getPaperChartsData(project_id)
-        getProjectStat(project_id)
+        if (!isNullES(project_id)) {
+            projectId.value = project_id
+            //获取接口数据
+            getClassifyChartsData(project_id)
+            getPaperChartsData(project_id)
+            getProjectStat(project_id)
+        } else {
+            window?.$message.warning('项目异常')
+        }
     } catch (error) {
         console.log(error)
     }
     isLoading.value = false
+    //是否显示引导提示
+    if (store.isDatavTour === 0) {
+        setTimeout(() => {
+            tourOpen.value = true
+        }, 500)
+    }
+}
+
+//关闭引导提示
+const tourFinishClose = async () => {
+    await userConfigSave({
+        isDatavTour: 1,
+    })
+    store.setIsDatavTour(1)
 }
 
 //监听浏览器窗口变化