1

src/layout/components/Top.vue

@@ -1,39 +1,39 @@
 <script setup lang="ts">
-import {storeToRefs} from "pinia";
+import { storeToRefs } from "pinia";
 import EditMyPassword from "@/layout/components/myconst/editmypassword.vue";
-import {useUserStore} from "@/store/modules/user";
-import {useAppStore} from "@/store/modules/app";
-import {Position} from "@element-plus/icons-vue";
+import { useUserStore } from "@/store/modules/user";
+import { useAppStore } from "@/store/modules/app";
+import { Position } from "@element-plus/icons-vue";
 
 const userStore = useUserStore();
 const appStore = useAppStore();
-const {device} = storeToRefs(appStore); // 设备类型：desktop-宽屏设备 || mobile-窄屏设备
+const { device } = storeToRefs(appStore); // 设备类型：desktop-宽屏设备 || mobile-窄屏设备
 
 const myPasswordBoxIsShow = ref(false);
 
 const date: Date = new Date();
 
-const tipsType = ref<number>(1)
+const tipsType = ref<number>(1);
 //
 const greetings = computed(() => {
   if (date.getHours() >= 6 && date.getHours() < 8) {
-    tipsType.value = 1
+    tipsType.value = 1;
     return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
   } else if (date.getHours() >= 8 && date.getHours() < 12) {
-    tipsType.value = 2
+    tipsType.value = 2;
     return "上午好🌞！";
   } else if (date.getHours() >= 12 && date.getHours() < 18) {
-    tipsType.value = 3
+    tipsType.value = 3;
     return "下午好☕！";
   } else if (date.getHours() >= 18 && date.getHours() < 24) {
-    tipsType.value = 4
+    tipsType.value = 4;
     return "晚上好🌃！";
   } else if (date.getHours() >= 0 && date.getHours() < 6) {
-    tipsType.value = 5
+    tipsType.value = 5;
     return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
   }
 });
-const {isFullscreen, toggle} = useFullscreen();
+const { isFullscreen, toggle } = useFullscreen();
 
 /**
  * 注销
@@ -45,22 +45,20 @@ function logout() {
     type: "warning",
   }).then(() => {
     userStore
-        .logout()
-        .then(() => {
-          tagsViewStore.delAllViews();
-        })
-        .then(() => {
-          router.push(`/login?redirect=${route.fullPath}`);
-        });
+      .logout()
+      .then(() => {
+        tagsViewStore.delAllViews();
+      })
+      .then(() => {
+        router.push(`/login?redirect=${route.fullPath}`);
+      });
   });
 }
 
 /**
  * 打开个人资料
  */
-const openMyContBox = () => {
-
-}
+const openMyContBox = () => {};
 /**
  * 修改个人密码
  */
@@ -68,17 +66,15 @@ const editMyPasswordForm = () => {
   // console.log("修改个人密码");
   myPasswordBoxIsShow.value = true;
   // console.log("修改个人密码",myPasswordBoxIsShow.value );
-}
-
+};
 </script>
 
 <template>
   <div class="top">
     <div class="logo">
-      <img src="../../assets/images/logo.png">
+      <img src="../../assets/images/logo.png" />
     </div>
     <div class="flex">
-
       <!--			&lt;!&ndash; 导航栏设置(窄屏隐藏)&ndash;&gt;-->
       <div v-if="device !== 'mobile'" class="setting-container">
         <!--				<el-text v-if="tipsType==1" class="mx-1" type="success">{{ greetings }}</el-text>-->
@@ -88,22 +84,20 @@ const editMyPasswordForm = () => {
         <!--				<el-text v-if="tipsType==5" class="mx-1">{{ greetings }}</el-text>-->
         <!--全屏 -->
         <div class="setting-item" @click="toggle">
-          <svg-icon
-              :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
-          />
+          <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" />
         </div>
         <!-- 布局大小 -->
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select class="setting-item"/>
+          <size-select class="setting-item" />
         </el-tooltip>
         <!--语言选择-->
-        <lang-select class="setting-item"/>
+        <lang-select class="setting-item" />
       </div>
 
       <!--			&lt;!&ndash; 用户头像 &ndash;&gt;-->
       <el-dropdown trigger="click">
         <div class="avatar-container">
-          <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'"/>
+          <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
           <span style="padding: 0 10px">{{ userStore.nickname }}</span>
           <arrow-down class="w-3 h-3"></arrow-down>
         </div>
@@ -112,8 +106,12 @@ const editMyPasswordForm = () => {
             <router-link to="/">
               <el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
             </router-link>
-            <el-dropdown-item @click="openMyContBox">{{ $t("navbar.archives") }}</el-dropdown-item>
-            <el-dropdown-item @click="editMyPasswordForm">{{ $t("navbar.password") }}</el-dropdown-item>
+            <el-dropdown-item @click="openMyContBox">{{
+              $t("navbar.archives")
+            }}</el-dropdown-item>
+            <el-dropdown-item @click="editMyPasswordForm">{{
+              $t("navbar.password")
+            }}</el-dropdown-item>
             <el-dropdown-item divided @click="logout">
               {{ $t("navbar.logout") }}
             </el-dropdown-item>
@@ -121,14 +119,14 @@ const editMyPasswordForm = () => {
         </template>
       </el-dropdown>
     </div>
-    <EditMyPassword v-model:editPasswordIsShow="myPasswordBoxIsShow"/>
+    <EditMyPassword v-model:editPasswordIsShow="myPasswordBoxIsShow" />
   </div>
 </template>
 
 <style scoped lang="scss">
 .top {
   height: 68px;
-  background: #1E5EFF;
+  background: #1e5eff;
   position: fixed;
   padding: 0 20px;
   top: 0;

src/layout/index.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import {computed, watchEffect} from "vue";
-import {useWindowSize} from "@vueuse/core";
-import {AppMain, Navbar, Settings, TagsView} from "./components/index";
+import { computed, watchEffect } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { AppMain, Navbar, Settings, TagsView } from "./components/index";
 import Sidebar from "./components/Sidebar/index.vue";
 import RightPanel from "@/components/RightPanel/index.vue";
-import Top from './components/Top.vue'
+import Top from "./components/Top.vue";
 
-import {useAppStore} from "@/store/modules/app";
-import {useSettingsStore} from "@/store/modules/settings";
+import { useAppStore } from "@/store/modules/app";
+import { useSettingsStore } from "@/store/modules/settings";
 
-const {width} = useWindowSize();
+const { width } = useWindowSize();
 
 /**
  * 响应式布局容器固定宽度
@@ -28,109 +28,105 @@ const showTagsView = computed(() => settingsStore.tagsView);
 const showSettings = computed(() => settingsStore.showSettings);
 
 const classObj = computed(() => ({
-	hideSidebar: !appStore.sidebar.opened,
-	openSidebar: appStore.sidebar.opened,
-	withoutAnimation: appStore.sidebar.withoutAnimation,
-	mobile: appStore.device === "mobile",
+  hideSidebar: !appStore.sidebar.opened,
+  openSidebar: appStore.sidebar.opened,
+  withoutAnimation: appStore.sidebar.withoutAnimation,
+  mobile: appStore.device === "mobile",
 }));
 
 watchEffect(() => {
-	if (width.value < WIDTH) {
-		appStore.toggleDevice("mobile");
-		appStore.closeSideBar(true);
-	} else {
-		appStore.toggleDevice("desktop");
-
-		if (width.value >= 1200) {
-			//大屏
-			appStore.openSideBar(true);
-		} else {
-			appStore.closeSideBar(true);
-		}
-	}
+  if (width.value < WIDTH) {
+    appStore.toggleDevice("mobile");
+    appStore.closeSideBar(true);
+  } else {
+    appStore.toggleDevice("desktop");
+
+    if (width.value >= 1200) {
+      //大屏
+      appStore.openSideBar(true);
+    } else {
+      appStore.closeSideBar(true);
+    }
+  }
 });
 
 function handleOutsideClick() {
-	appStore.closeSideBar(false);
+  appStore.closeSideBar(false);
 }
 </script>
 
 <template>
-
-	<div :class="classObj" class="app-wrapper">
-
-		<!-- 手机设备侧边栏打开遮罩层 -->
-		<div
-				v-if="classObj.mobile && classObj.openSidebar"
-				class="drawer-bg"
-				@click="handleOutsideClick"
-		></div>
-		<top></top>
-
-
-		<Sidebar class="sidebar-container"/>
-
-		<div :class="{ hasTagsView: showTagsView }" class="main-container">
-			<div :class="{ 'fixed-header': fixedHeader }" style="margin: 10px 20px 0 20px;">
-				<navbar></navbar>
-				<tags-view v-if="showTagsView"/>
-			</div>
-
-			<!--主页面-->
-			<app-main/>
-
-			<!-- 设置面板 -->
-			<RightPanel v-if="showSettings">
-				<settings/>
-			</RightPanel>
-		</div>
-	</div>
+  <div :class="classObj" class="app-wrapper">
+    <!-- 手机设备侧边栏打开遮罩层 -->
+    <div
+      v-if="classObj.mobile && classObj.openSidebar"
+      class="drawer-bg"
+      @click="handleOutsideClick"
+    ></div>
+    <top></top>
+
+    <Sidebar class="sidebar-container" />
+
+    <div :class="{ hasTagsView: showTagsView }" class="main-container">
+      <div :class="{ 'fixed-header': fixedHeader }" style="margin: 10px 20px 0 20px">
+        <navbar></navbar>
+        <tags-view v-if="showTagsView" />
+      </div>
+
+      <!--主页面-->
+      <app-main />
+
+      <!-- 设置面板 -->
+      <RightPanel v-if="showSettings">
+        <settings />
+      </RightPanel>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .app-wrapper {
-	background: #F5F6FA;
-	position: relative;
-	width: 100%;
-	height: 100%;
-
-	// &::after {
-	// 	display: table;
-	// 	clear: both;
-	// 	content: "";
-	// }
-
-
-	&.mobile.openSidebar {
-		position: fixed;
-		top: 0;
-	}
+  background: #f5f6fa;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  // &::after {
+  // 	display: table;
+  // 	clear: both;
+  // 	content: "";
+  // }
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
 }
 
 .fixed-header {
-	position: fixed;
-	top: 0;
-	right: 0;
-	z-index: 9;
-	width: calc(100% - #{$sideBarWidth});
-	transition: width 0.28s;
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
 }
 
 .hideSidebar .fixed-header {
-	width: calc(100% - 54px);
+  width: calc(100% - 54px);
 }
 
 .mobile .fixed-header {
-	width: 100%;
+  width: 100%;
 }
 
 .drawer-bg {
-	position: absolute;
-	top: 0;
-	z-index: 999;
-	width: 100%;
-	height: 100%;
-	background: #000;
-	opacity: 0.3;
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.3;
 }
 </style>

src/views/dashboard/index.vue

@@ -3,14 +3,17 @@
 @ 时间: 2023-11-06 13:39:13
 @ 备注: 首页
 -->
-<script lang='ts' setup>
-import * as echarts from 'echarts';	//引入图形界面
+<script lang="ts" setup>
+import * as echarts from "echarts"; //引入图形界面
 
 import { useUserStore } from "@/store/modules/user";
 
-
-import { orgInfo } from '@/api/displayboardapi/types'
-import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi'
+import { orgInfo } from "@/api/displayboardapi/types";
+import {
+  getOrgChiled,
+  getCompanyDeparment,
+  targetListForDepartment,
+} from "@/api/displayboardapi/indexapi";
 
 import UserInfo from "@/views/dashboard/components/userinfo.vue";
 import SanLianpIng from "@/views/dashboard/components/sanlianping.vue";
@@ -22,108 +25,101 @@ import Application from "@/views/dashboard/components/application.vue";
 import HostNews from "@/views/dashboard/components/hostnews.vue";
 
 const userStore = useUserStore();
-const orgListCont = ref<orgInfo[]>([])
-const educationOrgId = ref<number>(309)
-const masterBody = ref<any>(null)
-const drawerWidht = ref<any>()
+const orgListCont = ref<orgInfo[]>([]);
+const educationOrgId = ref<number>(309);
+const masterBody = ref<any>(null);
+const drawerWidht = ref<any>();
 /**
  * 获取行政组织
  */
-function getOrgList(){
-	getOrgChiled({id:313})
-		.then(( {data} )=>{
-			// console.log("获取行政组织-2-->",data)
-			orgListCont.value = data.list
-			educationOrgId.value = data.current
-		})
+function getOrgList() {
+  getOrgChiled({ id: 313 }).then(({ data }) => {
+    // console.log("获取行政组织-2-->",data)
+    orgListCont.value = data.list;
+    educationOrgId.value = data.current;
+  });
 }
 
+const orgAllYears = ref<any>(); //当前年
 
-
-const orgAllYears = ref<any>()	//当前年
-
-const oenOrg = ref<any>() //单一行政组织
-
+const oenOrg = ref<any>(); //单一行政组织
 
 //渲染完页面再执行
 onMounted(() => {
-	
-	drawerWidht.value = masterBody.value?.clientWidth
-	getOrgList();
-	// console.log("热门新闻----100---->",drawerWidht.value)
-})
+  drawerWidht.value = masterBody.value?.clientWidth;
+  getOrgList();
+  // console.log("热门新闻----100---->",drawerWidht.value)
+});
 </script>
 <template>
-		<div ref="masterBody" class="app_container">
-            <div class="first-main">
-                <div class="main-width74">
-                    <AllOrgYear :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
-                </div>
-                <div class="main-width26">
-                    <HostNews v-model:drawer-widht="drawerWidht" />
-                </div>
-            </div>
-            <div class="cart_top_juLi first-main">
-                <div class="main-width74 first-main">
-                    <div class="main-width50">
-                        <OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
-                    </div>
-                    <div class="main-width50">
-                        <OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" />	
-                    </div>
-                </div>
-                <div class="main-width26">
-                    <Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
-                </div>
-            </div>
-			<el-row :gutter="10" class="cart_top_juLi" >
-				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="readback">			
-					<SanLianpIng />
-				</el-col>
-			</el-row>
-			
-		</div>
+  <div ref="masterBody" class="app_container">
+    <div class="first-main">
+      <div class="main-width74">
+        <AllOrgYear :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+      </div>
+      <div class="main-width26">
+        <HostNews v-model:drawer-widht="drawerWidht" />
+      </div>
+    </div>
+    <div class="cart_top_juLi first-main">
+      <div class="main-width74 first-main">
+        <div class="main-width50">
+          <OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+        </div>
+        <div class="main-width50">
+          <OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+        </div>
+      </div>
+      <div class="main-width26">
+        <Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+      </div>
+    </div>
+    <el-row :gutter="10" class="cart_top_juLi">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="readback">
+        <SanLianpIng />
+      </el-col>
+    </el-row>
+  </div>
 </template>
-<style  lang='scss' scoped>
-.app_container{
-	padding: 10px 20px 0px 20px;
-    height: calc(100% - 10px);
-	overflow: hidden;
-	overflow-y: auto;
-    width: 100%;
+<style lang="scss" scoped>
+.app_container {
+  padding: 10px 20px 0px 20px;
+  height: calc(100% - 10px);
+  overflow: hidden;
+  overflow-y: auto;
+  width: 100%;
 }
-.orgAllMothsTitle{
-	width:100%;
-	display: flex;
-	align-items: center;
-	justify-content:space-between;
-		
+.orgAllMothsTitle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
-.span_icon_left{
-	margin-right:10px;
+.span_icon_left {
+  margin-right: 10px;
 }
-.cart_top_juLi{
-	margin-top:20px;
+.cart_top_juLi {
+  margin-top: 20px;
 }
-.titleInfo{
-	font-size: 20px;
-	font-weight: bold;
+.titleInfo {
+  font-size: 20px;
+  font-weight: bold;
 }
-.first-main{
-    display: flex;
-    justify-content: space-between;
-    height: 330px;
+.first-main {
+  display: flex;
+  justify-content: space-between;
+  height: 330px;
 }
-.main-width74{
-    width: calc(100% - 370px);
-    height: 100%;
+.main-width74 {
+  width: calc(100% - 370px);
+  height: 100%;
 }
-.main-width26{
-    width: 350px;
-    height: 100%;
+.main-width26 {
+  width: 350px;
+  height: 100%;
 }
-.main-width50{
-    width: calc(50% - 10px);
-    height: 100%;
+.main-width50 {
+  width: calc(50% - 10px);
+  height: 100%;
 }
 </style>