16 changed files with 4610 additions and 397 deletions
@ -0,0 +1,3 @@ |
|||
export const formControlProject = (val:any) =>{ |
|||
return [] |
|||
} |
|||
@ -0,0 +1,141 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 15:12:45 |
|||
@ 备注: 自定义表单组件页面(App专用) |
|||
--> |
|||
<script lang='ts' setup> |
|||
import controlListData from '@/components/DesignForm/assembly' |
|||
import Draggable from 'vuedraggable-es' |
|||
import '@/assets/iconfont/iconfont.css' |
|||
|
|||
//引入页面 |
|||
import FormVersion from '@/components/DesignForm/formVersion.vue'; |
|||
|
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
tableKey?: number | string, |
|||
signCode?: number | string, |
|||
}>(), |
|||
{} |
|||
) |
|||
const designType = inject('formDesignType') as string //注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。 |
|||
// 默认搜索允许显示的字段 |
|||
const searchField = [ |
|||
'input', |
|||
'radio', |
|||
'checkbox', |
|||
'select', |
|||
'datePicker', |
|||
'timePicker', |
|||
'inputNumber', |
|||
'cascader', |
|||
'component', |
|||
'button' |
|||
] |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 10:58:56 |
|||
@ 功能: 表单组件数据 |
|||
*/ |
|||
const controlList = computed(() => { |
|||
if (designType === 'search') { |
|||
// 只返回基础字段 |
|||
const temp: any = [] |
|||
controlListData.forEach((item: any) => { |
|||
if (item.children) { |
|||
const filter = item.children.filter((ch: any) => { |
|||
return searchField.includes(ch.type) |
|||
}) |
|||
if (filter && filter.length) { |
|||
temp.push({ title: item.title, children: filter }) |
|||
} |
|||
} |
|||
}) |
|||
return temp |
|||
} else { |
|||
return controlListData |
|||
} |
|||
}) |
|||
const tableVersion = ref() //版本显示器 |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'versionUpdateForm', value: string): void |
|||
}>() |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 11:36:59 |
|||
@ 功能: 启用和禁用版本 |
|||
*/ |
|||
const enableOrDisable = (val?:any) =>{ |
|||
console.log("启用和禁用版本",val) |
|||
emits('versionUpdateForm', val) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 11:40:15 |
|||
@ 功能: 打开版本选择页面 |
|||
*/ |
|||
const useVersionClick = () => { |
|||
tableVersion.value.open() |
|||
} |
|||
const activities = [ |
|||
{ |
|||
content: 'Event start', |
|||
timestamp: '2018-04-15', |
|||
}, |
|||
{ |
|||
content: 'Approved', |
|||
timestamp: '2018-04-13', |
|||
}, |
|||
{ |
|||
content: 'Success', |
|||
timestamp: '2018-04-11', |
|||
}, |
|||
] |
|||
</script> |
|||
<template> |
|||
<div class="components-list"> |
|||
<div v-for="(list, index) in controlList" :key="index"> |
|||
<div class="title"> |
|||
{{ list.title }} |
|||
<div |
|||
class="template" |
|||
@click="useVersionClick" |
|||
> |
|||
版本 |
|||
</div> |
|||
</div> |
|||
<draggable |
|||
v-model="list.children" |
|||
tag="ul" |
|||
:group="{ name: 'form', pull: 'clone', put: false }" |
|||
ghost-class="ghost" |
|||
:sort="false" |
|||
:clone="clone" |
|||
item-key="key123" |
|||
> |
|||
|
|||
<template #item="{ element }"> |
|||
<li class="fontIcon" :class="[element.type]"> |
|||
<i v-if="element.iconFont==''" :class="`icon-${element.icon}`"></i> |
|||
<i v-if="element.iconFont!=''" :class="`fa ${element.iconFont} `"></i> |
|||
<span :title="element.label">{{ element.label }}</span> |
|||
</li> |
|||
</template> |
|||
</draggable> |
|||
</div> |
|||
</div> |
|||
<FormVersion ref="tableVersion" :table-key="props.tableKey" :sign-code="props.signCode" @enableOrDisable="enableOrDisable" /> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.tab_pane_body{ |
|||
text-align: center; |
|||
|
|||
} |
|||
.fontIcon{ |
|||
i{ |
|||
padding: 4px 0px 0 0px; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,33 @@ |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-10 09:38:51 |
|||
@ 功能: 数字规则列表 |
|||
*/ |
|||
interface NumberValidateTypes { |
|||
type: string |
|||
label: string |
|||
msg: string |
|||
} |
|||
const NumberValidateConfig: NumberValidateTypes[] = [ |
|||
{ |
|||
type: 'time', |
|||
label: '时间', |
|||
msg:'请选择时间格式' |
|||
}, |
|||
{ |
|||
type: 'text', |
|||
label: '自定义字符', |
|||
msg:'请输入自定义字符' |
|||
}, |
|||
{ |
|||
type: 'serialnumber', |
|||
label: '流水序号', |
|||
msg:'流水号起始值' |
|||
}, |
|||
{ |
|||
type: 'randomnumber', |
|||
label: '随机数', |
|||
msg:'请输入随机数位数' |
|||
} |
|||
] |
|||
export default NumberValidateConfig |
|||
@ -0,0 +1,104 @@ |
|||
// 快速添加 内置校验规则
|
|||
interface ValidateTypes { |
|||
type: string |
|||
label: string |
|||
regExp?: RegExp |
|||
message?: string |
|||
} |
|||
const validateConfig: ValidateTypes[] = [ |
|||
{ |
|||
type: 'required', |
|||
label: '必填', |
|||
regExp: /^\s*$/, |
|||
message: '必填项' |
|||
}, |
|||
{ |
|||
type: 'mobile', |
|||
label: '手机号码', |
|||
regExp: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, |
|||
message: '请输入手机号码' |
|||
}, |
|||
{ |
|||
type: 'tel', |
|||
label: '固话', |
|||
regExp: /^0\d{2,3}-\d{7,8}$/, |
|||
message: '请输入固定电话号码' |
|||
}, |
|||
{ |
|||
type: 'phone', |
|||
label: '固话或手机', |
|||
regExp: /^((0\d{2,3}(-?)\d{7,8})|(1[3456789]\d{9}))$/, |
|||
message: '请输入固定电话号码或手机号' |
|||
}, |
|||
{ |
|||
type: 'email', |
|||
label: '邮箱', |
|||
regExp: /^[a-z0-9A-Z._%-]+@([a-z0-9A-Z-]+\.)+[a-zA-Z]{2,4}$/, |
|||
message: '请输入邮箱地址' |
|||
}, |
|||
{ |
|||
type: 'int', |
|||
label: '正整数', |
|||
regExp: /^[0-9]*[1-9][0-9]*$/, |
|||
message: '请输入正整数' |
|||
}, |
|||
{ |
|||
type: 'number', |
|||
label: '数字', |
|||
regExp: /^\d+(\.\d+)?$/, |
|||
message: '请输入数字' |
|||
}, |
|||
{ |
|||
type: 'money', |
|||
label: '金额', |
|||
regExp: /^[0-9]+\.?[0-9]{0,2}$/, |
|||
message: '请输入正确的金额，最多两位小数' |
|||
}, |
|||
{ |
|||
type: 'card', |
|||
label: '身份证', |
|||
regExp: |
|||
/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, |
|||
message: '请输入身份证号' |
|||
}, |
|||
{ |
|||
type: 'cn', |
|||
label: '中文', |
|||
regExp: /[\u4e00-\u9fa5]+/, |
|||
message: '请输入中文' |
|||
}, |
|||
{ |
|||
type: 'numberLetter', |
|||
label: '数字字母', |
|||
regExp: /[0-9a-zA-Z]$/, |
|||
message: '请输入数字或字母' |
|||
}, |
|||
{ |
|||
type: 'url', |
|||
label: '网址', |
|||
regExp: /^https?:\/\/((.)+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?.(\?)?)*)*$/, |
|||
message: '请输入网址' |
|||
}, |
|||
{ |
|||
type: 'longitude', |
|||
label: '经度', |
|||
regExp: /^[-+]?(0?\d{1,2}\.\d{1,10}|1[0-7]?\d\.\d{1,10}|180\.0{1,10})$/, |
|||
message: '请输入正确的经度' |
|||
}, |
|||
{ |
|||
type: 'latitude', |
|||
label: '纬度', |
|||
regExp: /^[-+]?([0-8]?\d{1}\.\d{1,10}|90\.0{1,10})$/, |
|||
message: '请输入正确的纬度' |
|||
}, |
|||
{ |
|||
type: 'rules', |
|||
label: '自定义正则', |
|||
message:"" |
|||
}, |
|||
{ |
|||
type: 'methods', |
|||
label: '自定义方法' |
|||
} |
|||
] |
|||
export default validateConfig |
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -1,146 +1,250 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-11-06 13:39:13 |
|||
@ 备注: 首页 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import * as echarts from 'echarts'; //引入图形界面 |
|||
<script lang="ts"> |
|||
export default { name: "Dashboard" }; |
|||
</script> |
|||
|
|||
<script setup lang="ts"> |
|||
import { useUserStore } from "@/store/modules/user"; |
|||
import { useTransition, TransitionPresets } from "@vueuse/core"; |
|||
|
|||
|
|||
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"; |
|||
import EducationChart from "@/views/dashboard/components/education.vue"; |
|||
import AllOrgYear from "@/views/dashboard/components/allorgyear.vue"; |
|||
import OrgUserAge from "@/views/dashboard/components/orguserage.vue"; |
|||
import OrgEducation from "@/views/dashboard/components/orgeducation.vue"; |
|||
import Application from "@/views/dashboard/components/application.vue"; |
|||
import HostNews from "@/views/dashboard/components/hostnews.vue"; |
|||
import GithubCorner from "@/components/GithubCorner/index.vue"; |
|||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|||
import BarChart from "./components/BarChart.vue"; |
|||
import PieChart from "./components/PieChart.vue"; |
|||
import RadarChart from "./components/RadarChart.vue"; |
|||
|
|||
const userStore = useUserStore(); |
|||
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 |
|||
}) |
|||
} |
|||
|
|||
const date: Date = new Date(); |
|||
|
|||
const greetings = computed(() => { |
|||
if (date.getHours() >= 6 && date.getHours() < 8) { |
|||
return "晨起披衣出草堂，轩窗已自喜微凉🌅！"; |
|||
} else if (date.getHours() >= 8 && date.getHours() < 12) { |
|||
return "上午好🌞！"; |
|||
} else if (date.getHours() >= 12 && date.getHours() < 18) { |
|||
return "下午好☕！"; |
|||
} else if (date.getHours() >= 18 && date.getHours() < 24) { |
|||
return "晚上好🌃！"; |
|||
} else if (date.getHours() >= 0 && date.getHours() < 6) { |
|||
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！"; |
|||
} |
|||
}); |
|||
|
|||
const orgAllYears = ref<any>() //当前年 |
|||
const duration = 5000; |
|||
|
|||
const oenOrg = ref<any>() //单一行政组织 |
|||
// 收入金额 |
|||
const amount = ref(0); |
|||
const amountOutput = useTransition(amount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
amount.value = 2000; |
|||
|
|||
// 访问数 |
|||
const visitCount = ref(0); |
|||
const visitCountOutput = useTransition(visitCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
visitCount.value = 2000; |
|||
|
|||
//渲染完页面再执行 |
|||
onMounted(() => { |
|||
|
|||
drawerWidht.value = masterBody.value?.clientWidth |
|||
getOrgList(); |
|||
// console.log("热门新闻----100---->",drawerWidht.value) |
|||
}) |
|||
//消息数 |
|||
const messageCount = ref(0); |
|||
const messageCountOutput = useTransition(messageCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
messageCount.value = 2000; |
|||
|
|||
// 订单数 |
|||
const orderCount = ref(0); |
|||
const orderCountOutput = useTransition(orderCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
orderCount.value = 2000; |
|||
</script> |
|||
|
|||
<template> |
|||
<div ref="masterBody" class="app_container"> |
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
<AllOrgYear :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<UserInfo :user-store="userStore" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
|
|||
<HostNews v-model:drawer-widht="drawerWidht" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<SanLianpIng /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</div> |
|||
<div class="dashboard-container"> |
|||
<!-- github角标 --> |
|||
|
|||
|
|||
<!-- 用户信息 --> |
|||
<el-row class="mb-8"> |
|||
<el-card class="w-full"> |
|||
<div class="flex justify-between flex-wrap"> |
|||
<div class="flex items-center"> |
|||
<img |
|||
class="user-avatar" |
|||
:src="userStore.avatar + '?imageView2/1/w/80/h/80'" |
|||
/> |
|||
<span class="ml-[10px] text-[16px]"> |
|||
{{ userStore.nickname }} |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="leading-[40px]"> |
|||
{{ greetings }} |
|||
</div> |
|||
|
|||
<div v-if="false" class="space-x-2 flex items-center" > |
|||
<el-link |
|||
target="_blank" |
|||
type="danger" |
|||
href="https://www.cnblogs.com/haoxianrui/p/16090029.html" |
|||
>官方0到1教程</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="success" |
|||
href="https://gitee.com/youlaiorg/vue3-element-admin" |
|||
>Gitee源码</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="primary" |
|||
href="https://github.com/youlaitech/vue3-element-admin" |
|||
>GitHub源码 |
|||
</el-link> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-row> |
|||
|
|||
<!-- 数据卡片 --> |
|||
<el-row :gutter="40" class="mb-4"> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="uv" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">访问数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(visitCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<!--消息数--> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="message" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">消息数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(messageCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="money" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">收入金额</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(amountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-2"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="shopping" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">订单数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(orderCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- Echarts 图表 --> |
|||
<el-row :gutter="40"> |
|||
<el-col :sm="24" :lg="8" class="mb-4"> |
|||
<BarChart |
|||
id="barChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<PieChart |
|||
id="pieChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<RadarChart |
|||
id="radarChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app_container{ |
|||
padding: 10px 20px 0px 20px; |
|||
height: calc(100vh - 90px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.readback{ |
|||
// background-color:#FF0000; |
|||
.allOrgAxisCares{ |
|||
display: block; |
|||
width:100%; |
|||
height:280px; |
|||
overflow:auto; |
|||
} |
|||
|
|||
} |
|||
.orgAllMothsTitle{ |
|||
width:100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content:space-between; |
|||
|
|||
} |
|||
.greenColor{ |
|||
// background-color:#FFAC52; |
|||
|
|||
// padding:0 10px 0 10px; |
|||
} |
|||
.span_icon_left{ |
|||
margin-right:10px; |
|||
} |
|||
.cart_top_juLi{ |
|||
// margin-top:10px; |
|||
} |
|||
.titleInfo{ |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
|
|||
<style lang="scss" scoped> |
|||
.dashboard-container { |
|||
position: relative; |
|||
padding: 24px; |
|||
|
|||
.user-avatar { |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.github-corner { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 99; |
|||
border: 0; |
|||
} |
|||
|
|||
.data-box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 20px; |
|||
font-weight: bold; |
|||
color: var(--el-text-color-regular); |
|||
background: var(--el-bg-color-overlay); |
|||
border-color: var(--el-border-color); |
|||
box-shadow: var(--el-box-shadow-dark); |
|||
} |
|||
|
|||
.svg-icon { |
|||
fill: currentcolor !important; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,146 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-11-06 13:39:13 |
|||
@ 备注: 首页 |
|||
--> |
|||
<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 UserInfo from "@/views/dashboard/components/userinfo.vue"; |
|||
import SanLianpIng from "@/views/dashboard/components/sanlianping.vue"; |
|||
import EducationChart from "@/views/dashboard/components/education.vue"; |
|||
import AllOrgYear from "@/views/dashboard/components/allorgyear.vue"; |
|||
import OrgUserAge from "@/views/dashboard/components/orguserage.vue"; |
|||
import OrgEducation from "@/views/dashboard/components/orgeducation.vue"; |
|||
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>() |
|||
/** |
|||
* 获取行政组织 |
|||
*/ |
|||
function getOrgList(){ |
|||
getOrgChiled({id:313}) |
|||
.then(( {data} )=>{ |
|||
console.log("获取行政组织-2-->",data) |
|||
orgListCont.value = data.list |
|||
educationOrgId.value = data.current |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
const orgAllYears = ref<any>() //当前年 |
|||
|
|||
const oenOrg = ref<any>() //单一行政组织 |
|||
|
|||
|
|||
//渲染完页面再执行 |
|||
onMounted(() => { |
|||
|
|||
drawerWidht.value = masterBody.value?.clientWidth |
|||
getOrgList(); |
|||
// console.log("热门新闻----100---->",drawerWidht.value) |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div ref="masterBody" class="app_container"> |
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
<AllOrgYear :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<UserInfo :user-store="userStore" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
|
|||
<HostNews v-model:drawer-widht="drawerWidht" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<SanLianpIng /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app_container{ |
|||
padding: 10px 20px 0px 20px; |
|||
height: calc(100vh - 90px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.readback{ |
|||
// background-color:#FF0000; |
|||
.allOrgAxisCares{ |
|||
display: block; |
|||
width:100%; |
|||
height:280px; |
|||
overflow:auto; |
|||
} |
|||
|
|||
} |
|||
.orgAllMothsTitle{ |
|||
width:100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content:space-between; |
|||
|
|||
} |
|||
.greenColor{ |
|||
// background-color:#FFAC52; |
|||
|
|||
// padding:0 10px 0 10px; |
|||
} |
|||
.span_icon_left{ |
|||
margin-right:10px; |
|||
} |
|||
.cart_top_juLi{ |
|||
// margin-top:10px; |
|||
} |
|||
.titleInfo{ |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
@ -1,250 +0,0 @@ |
|||
<script lang="ts"> |
|||
export default { name: "Dashboard" }; |
|||
</script> |
|||
|
|||
<script setup lang="ts"> |
|||
import { useUserStore } from "@/store/modules/user"; |
|||
import { useTransition, TransitionPresets } from "@vueuse/core"; |
|||
|
|||
import GithubCorner from "@/components/GithubCorner/index.vue"; |
|||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|||
import BarChart from "./components/BarChart.vue"; |
|||
import PieChart from "./components/PieChart.vue"; |
|||
import RadarChart from "./components/RadarChart.vue"; |
|||
|
|||
const userStore = useUserStore(); |
|||
|
|||
const date: Date = new Date(); |
|||
|
|||
const greetings = computed(() => { |
|||
if (date.getHours() >= 6 && date.getHours() < 8) { |
|||
return "晨起披衣出草堂，轩窗已自喜微凉🌅！"; |
|||
} else if (date.getHours() >= 8 && date.getHours() < 12) { |
|||
return "上午好🌞！"; |
|||
} else if (date.getHours() >= 12 && date.getHours() < 18) { |
|||
return "下午好☕！"; |
|||
} else if (date.getHours() >= 18 && date.getHours() < 24) { |
|||
return "晚上好🌃！"; |
|||
} else if (date.getHours() >= 0 && date.getHours() < 6) { |
|||
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！"; |
|||
} |
|||
}); |
|||
|
|||
const duration = 5000; |
|||
|
|||
// 收入金额 |
|||
const amount = ref(0); |
|||
const amountOutput = useTransition(amount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
amount.value = 2000; |
|||
|
|||
// 访问数 |
|||
const visitCount = ref(0); |
|||
const visitCountOutput = useTransition(visitCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
visitCount.value = 2000; |
|||
|
|||
//消息数 |
|||
const messageCount = ref(0); |
|||
const messageCountOutput = useTransition(messageCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
messageCount.value = 2000; |
|||
|
|||
// 订单数 |
|||
const orderCount = ref(0); |
|||
const orderCountOutput = useTransition(orderCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
orderCount.value = 2000; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="dashboard-container"> |
|||
<!-- github角标 --> |
|||
|
|||
|
|||
<!-- 用户信息 --> |
|||
<el-row class="mb-8"> |
|||
<el-card class="w-full"> |
|||
<div class="flex justify-between flex-wrap"> |
|||
<div class="flex items-center"> |
|||
<img |
|||
class="user-avatar" |
|||
:src="userStore.avatar + '?imageView2/1/w/80/h/80'" |
|||
/> |
|||
<span class="ml-[10px] text-[16px]"> |
|||
{{ userStore.nickname }} |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="leading-[40px]"> |
|||
{{ greetings }} |
|||
</div> |
|||
|
|||
<div v-if="false" class="space-x-2 flex items-center" > |
|||
<el-link |
|||
target="_blank" |
|||
type="danger" |
|||
href="https://www.cnblogs.com/haoxianrui/p/16090029.html" |
|||
>官方0到1教程</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="success" |
|||
href="https://gitee.com/youlaiorg/vue3-element-admin" |
|||
>Gitee源码</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="primary" |
|||
href="https://github.com/youlaitech/vue3-element-admin" |
|||
>GitHub源码 |
|||
</el-link> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-row> |
|||
|
|||
<!-- 数据卡片 --> |
|||
<el-row :gutter="40" class="mb-4"> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="uv" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">访问数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(visitCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<!--消息数--> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="message" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">消息数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(messageCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="money" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">收入金额</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(amountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-2"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="shopping" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">订单数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(orderCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- Echarts 图表 --> |
|||
<el-row :gutter="40"> |
|||
<el-col :sm="24" :lg="8" class="mb-4"> |
|||
<BarChart |
|||
id="barChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<PieChart |
|||
id="pieChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<RadarChart |
|||
id="radarChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dashboard-container { |
|||
position: relative; |
|||
padding: 24px; |
|||
|
|||
.user-avatar { |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.github-corner { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 99; |
|||
border: 0; |
|||
} |
|||
|
|||
.data-box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 20px; |
|||
font-weight: bold; |
|||
color: var(--el-text-color-regular); |
|||
background: var(--el-bg-color-overlay); |
|||
border-color: var(--el-border-color); |
|||
box-shadow: var(--el-box-shadow-dark); |
|||
} |
|||
|
|||
.svg-icon { |
|||
fill: currentcolor !important; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue