herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

lwx_v11^2
hreenshan112 1 year ago
parent
32be0902ed
commit
eea07cd7aa
3 changed files with 202 additions and 212 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 56
      src/layout/components/Top.vue
  2. 30
      src/layout/index.vue
  3. 76
      src/views/dashboard/index.vue

56
src/layout/components/Top.vue
View File

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

30
src/layout/index.vue
View File

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed, watchEffect} from "vue"; import { computed, watchEffect } from "vue";
import {useWindowSize} from "@vueuse/core"; import { useWindowSize } from "@vueuse/core";
import {AppMain, Navbar, Settings, TagsView} from "./components/index"; import { AppMain, Navbar, Settings, TagsView } from "./components/index";
import Sidebar from "./components/Sidebar/index.vue"; import Sidebar from "./components/Sidebar/index.vue";
import RightPanel from "@/components/RightPanel/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 { useAppStore } from "@/store/modules/app";
import {useSettingsStore} from "@/store/modules/settings"; import { useSettingsStore } from "@/store/modules/settings";
const {width} = useWindowSize(); const { width } = useWindowSize();
/** /**
* 响应式布局容器固定宽度 * 响应式布局容器固定宽度
@ -56,9 +56,7 @@ function handleOutsideClick() {
</script> </script>
<template> <template>
<div :class="classObj" class="app-wrapper"> <div :class="classObj" class="app-wrapper">
<!-- 手机设备侧边栏打开遮罩层 --> <!-- 手机设备侧边栏打开遮罩层 -->
<div <div
v-if="classObj.mobile && classObj.openSidebar" v-if="classObj.mobile && classObj.openSidebar"
@ -67,21 +65,20 @@ function handleOutsideClick() {
></div> ></div>
<top></top> <top></top>
<Sidebar class="sidebar-container" />
<Sidebar class="sidebar-container"/>
<div :class="{ hasTagsView: showTagsView }" class="main-container"> <div :class="{ hasTagsView: showTagsView }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }" style="margin: 10px 20px 0 20px;"> <div :class="{ 'fixed-header': fixedHeader }" style="margin: 10px 20px 0 20px">
<navbar></navbar> <navbar></navbar>
<tags-view v-if="showTagsView"/> <tags-view v-if="showTagsView" />
</div> </div>
<!--主页面--> <!--主页面-->
<app-main/> <app-main />
<!-- 设置面板 --> <!-- 设置面板 -->
<RightPanel v-if="showSettings"> <RightPanel v-if="showSettings">
<settings/> <settings />
</RightPanel> </RightPanel>
</div> </div>
</div> </div>
@ -89,7 +86,7 @@ function handleOutsideClick() {
<style lang="scss" scoped> <style lang="scss" scoped>
.app-wrapper { .app-wrapper {
background: #F5F6FA; background: #f5f6fa;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -100,7 +97,6 @@ function handleOutsideClick() {
// content: ""; // content: "";
// } // }
&.mobile.openSidebar { &.mobile.openSidebar {
position: fixed; position: fixed;
top: 0; top: 0;

76
src/views/dashboard/index.vue
View File

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

Write Preview
Loading…
Cancel
Save