mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-11-13 14:13:47 +08:00
vue3的js和ts代码上传
This commit is contained in:
zhuoda
@@ -0,0 +1,107 @@
|
||||
<!--
|
||||
* 更新日志
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-12 22:34:00
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
*
|
||||
-->
|
||||
<template>
|
||||
<default-home-card extra="更多" icon="FireTwoTone" title="更新日志" @extraClick="onMore">
|
||||
<a-empty v-if="$lodash.isEmpty(data)" />
|
||||
<ul v-else>
|
||||
<template v-for="(item, index) in data" :key="index">
|
||||
<li class="un-read">
|
||||
<a class="content" @click="goDetail(item)">
|
||||
<a-badge status="geekblue" />
|
||||
{{ $smartEnumPlugin.getDescByValue('CHANGE_LOG_TYPE_ENUM', item.type) }}：{{ item.version }} 版本
|
||||
</a>
|
||||
<span class="time"> {{ item.publicDate }}</span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</default-home-card>
|
||||
|
||||
<ChangeLogForm ref="modalRef" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { smartSentry } from '/@/lib/smart-sentry';
|
||||
import { changeLogApi } from '/@/api/support/change-log/change-log-api';
|
||||
import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
|
||||
import ChangeLogForm from '/@/views/support/change-log/change-log-modal.vue';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const queryForm = {
|
||||
pageNum: 1,
|
||||
pageSize: 8,
|
||||
searchCount: false,
|
||||
};
|
||||
|
||||
let data = ref([]);
|
||||
|
||||
const loading = ref(false);
|
||||
// 查询列表
|
||||
async function queryChangeLog() {
|
||||
loading.value = true;
|
||||
try {
|
||||
let queryResult = await changeLogApi.queryPage(queryForm);
|
||||
data.value = queryResult.data.list;
|
||||
} catch (e) {
|
||||
smartSentry.captureError(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(queryChangeLog);
|
||||
|
||||
// 查看更多
|
||||
function onMore() {
|
||||
router.push({
|
||||
path: '/support/change-log/change-log-list',
|
||||
});
|
||||
}
|
||||
|
||||
// 进入详情
|
||||
const modalRef = ref();
|
||||
function goDetail(data) {
|
||||
modalRef.value.show(data);
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
ul li {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.content {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.time {
|
||||
flex-shrink: 0;
|
||||
color: @text-color-secondary;
|
||||
min-width: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
ul li :hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.un-read a {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.read a {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!--
|
||||
* 首页 card 插槽
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-12 22:34:00
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
*
|
||||
-->
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<a-card size="small">
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<component :is="$antIcons[props.icon]" v-if="props.icon" :style="{ fontSize: '18px' }" />
|
||||
<slot name="title"></slot>
|
||||
<span v-if="!$slots.title" class="smart-margin-left10">{{ props.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="props.extra" #extra>
|
||||
<slot name="extra"></slot>
|
||||
<a v-if="!$slots.extra" @click="extraClick">{{ props.extra }}</a>
|
||||
</template>
|
||||
<slot></slot>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
let props = defineProps({
|
||||
icon: String,
|
||||
title: String,
|
||||
extra: String,
|
||||
});
|
||||
let emits = defineEmits(['extraClick']);
|
||||
|
||||
function extraClick() {
|
||||
emits('extraClick');
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.card-container {
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 30px;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<default-home-card icon="ProfileTwoTone" title="【1024创新实验室】人员饭量">
|
||||
<div class="echarts-box">
|
||||
<div class="category-main" id="category-main"></div>
|
||||
</div>
|
||||
</default-home-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
function init() {
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['周一', '周二', '周三', '周四', '周五'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '善逸',
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar',
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '胡克',
|
||||
data: [100, 80, 120, 77, 52, 22, 190],
|
||||
type: 'bar',
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '开云',
|
||||
data: [200, 110, 85, 99, 120, 145, 180],
|
||||
type: 'bar',
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '初晓',
|
||||
data: [80, 70, 90, 110, 200, 44, 80],
|
||||
type: 'bar',
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
let chartDom = document.getElementById('category-main');
|
||||
if (chartDom) {
|
||||
let myChart = echarts.init(chartDom);
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.echarts-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.category-main {
|
||||
width: 800px;
|
||||
height: 280px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!--
|
||||
* @Author: zhuoda
|
||||
* @Date: 2021-08-24 16:35:45
|
||||
* @LastEditTime: 2022-06-11
|
||||
* @LastEditors: zhuoda
|
||||
* @Description:
|
||||
* @FilePath: /smart-admin/src/views/system/home/components/gauge.vue
|
||||
-->
|
||||
<template>
|
||||
<default-home-card icon="RocketTwoTone" title="业绩完成度">
|
||||
<div class="echarts-box">
|
||||
<div id="gauge-main" class="gauge-main"></div>
|
||||
</div>
|
||||
</default-home-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import DefaultHomeCard from "/@/views/system/home/components/default-home-card.vue";
|
||||
import * as echarts from "echarts";
|
||||
import {onMounted, watch} from "vue";
|
||||
import {reactive} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
percent: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
});
|
||||
|
||||
let option = reactive({});
|
||||
watch(
|
||||
() => props.percent,
|
||||
() => {
|
||||
init();
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
function init() {
|
||||
option = {
|
||||
series: [
|
||||
{
|
||||
type: "gauge",
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#464646",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 20,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
length: 10,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
distance: 50,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: props.percent,
|
||||
name: "完成度",
|
||||
title: {
|
||||
offsetCenter: ["0%", "-10%"],
|
||||
},
|
||||
detail: {
|
||||
offsetCenter: ["0%", "20%"],
|
||||
},
|
||||
},
|
||||
],
|
||||
title: {
|
||||
fontSize: 18,
|
||||
},
|
||||
detail: {
|
||||
fontSize: 16,
|
||||
color: "auto",
|
||||
formatter: "{value}%",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
let chartDom = document.getElementById("gauge-main");
|
||||
if (chartDom) {
|
||||
let myChart = echarts.init(chartDom);
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.echarts-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.gauge-main {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<default-home-card icon="FundTwoTone" title="【1024创新实验室】代码提交量">
|
||||
<div class="echarts-box">
|
||||
<div class="gradient-main" id="gradient-main"></div>
|
||||
</div>
|
||||
</default-home-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import DefaultHomeCard from "/@/views/system/home/components/default-home-card.vue";
|
||||
import * as echarts from 'echarts';
|
||||
import {onMounted} from "vue";
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
function init(){
|
||||
let option = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['罗伊', '佩弦', '开云', '清野', '飞叶']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '罗伊',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250]
|
||||
},
|
||||
{
|
||||
name: '佩弦',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 282, 111, 234, 220, 340, 310]
|
||||
},
|
||||
{
|
||||
name: '开云',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: '清野',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 0, 135)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(135, 0, 157)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120]
|
||||
},
|
||||
{
|
||||
name: '飞叶',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 302, 181, 234, 210, 290, 150]
|
||||
}
|
||||
]
|
||||
};
|
||||
let chartDom = document.getElementById("gradient-main");
|
||||
if (chartDom) {
|
||||
let myChart = echarts.init(chartDom);
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='less' scoped>
|
||||
.echarts-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.gradient-main {
|
||||
width: 1200px;
|
||||
height: 300px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<default-home-card icon="PieChartTwoTone" title="【1024创新实验室】上班摸鱼次数">
|
||||
<div class="echarts-box">
|
||||
<div class="pie-main" id="pie-main"></div>
|
||||
</div>
|
||||
</default-home-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import DefaultHomeCard from "/@/views/system/home/components/default-home-card.vue";
|
||||
import * as echarts from 'echarts';
|
||||
import {onMounted} from "vue";
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
function init(){
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '摸鱼次数',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 10, name: '初晓' },
|
||||
{ value: 8, name: '善逸' },
|
||||
{ value: 3, name: '胡克' },
|
||||
{ value: 1, name: '罗伊' },
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
let chartDom = document.getElementById("pie-main");
|
||||
if (chartDom) {
|
||||
let myChart = echarts.init(chartDom);
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='less' scoped>
|
||||
.echarts-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.pie-main {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!--
|
||||
* 官方 二维码
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-12 22:34:00
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
*
|
||||
-->
|
||||
<template>
|
||||
<default-home-card icon="SmileTwoTone" title="添加微信，关注【小镇程序员】、【1024创新实验室】">
|
||||
<div class="app-qr-box">
|
||||
<div class="app-qr">
|
||||
<img :src="zhuoda" />
|
||||
<span class="qr-desc strong"> 卓大的微信号！ </span>
|
||||
<span class="qr-desc"> 骚扰卓大 :) </span>
|
||||
</div>
|
||||
<div class="app-qr">
|
||||
<img :src="xiaozhen" />
|
||||
<span class="qr-desc strong"> 小镇程序员 </span>
|
||||
<span class="qr-desc"> 代码与生活，还有钱途 </span>
|
||||
</div>
|
||||
<div class="app-qr">
|
||||
<img :src="lab1024" />
|
||||
<span class="qr-desc strong"> 1024创新实验室 </span>
|
||||
<span class="qr-desc"> 官方账号 </span>
|
||||
</div>
|
||||
</div>
|
||||
</default-home-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
|
||||
import lab1024 from '/@/assets/images/1024lab/1024lab-gzh.jpg';
|
||||
import zhuoda from '/@/assets/images/1024lab/zhuoda-wechat.jpg';
|
||||
import xiaozhen from '/@/assets/images/1024lab/xiaozhen-gzh.jpg';
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.app-qr-box {
|
||||
display: flex;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.app-qr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 33%;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
> img {
|
||||
width: 100%;
|
||||
max-width: 120px;
|
||||
height: 100%;
|
||||
max-height: 120px;
|
||||
}
|
||||
.strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.qr-desc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
overflow-x: hidden;
|
||||
> img {
|
||||
width: 15px;
|
||||
height: 18px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-carousel :deep(.slick-slide) {
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
width: 120px;
|
||||
background: #364d79;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-carousel :deep(.slick-slide h3) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" title="新建快捷入口" @close="onClose">
|
||||
<a-form ref="formRef" :model="form" :rules="rules">
|
||||
<a-form-item label="图标" name="icon">
|
||||
<IconSelect @updateIcon="selectIcon">
|
||||
<template #iconSelect>
|
||||
<a-input v-model:value="form.icon" placeholder="请输入菜单图标" style="width: 200px"/>
|
||||
<component :is="$antIcons[form.icon]" class="smart-margin-left15" style="font-size: 20px"/>
|
||||
</template>
|
||||
</IconSelect>
|
||||
</a-form-item>
|
||||
<a-form-item label="标题" name="title">
|
||||
<a-input v-model:value="form.title" placeholder="请输入标题"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="路径" name="path">
|
||||
<a-input v-model:value="form.path" placeholder="请输入路径"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="onClose">取消</a-button>
|
||||
<a-button type="primary" @click="onSubmit">提交</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import {reactive, ref} from "vue";
|
||||
import {message} from "ant-design-vue";
|
||||
import IconSelect from '/@/components/framework/icon-select/index.vue';
|
||||
import _ from "lodash";
|
||||
|
||||
defineExpose({
|
||||
showModal
|
||||
})
|
||||
|
||||
const emit = defineEmits("addQuickEntry");
|
||||
|
||||
// 组件ref
|
||||
const formRef = ref();
|
||||
|
||||
const formDefault = {
|
||||
icon: undefined,
|
||||
title: "",
|
||||
path: "",
|
||||
};
|
||||
let form = reactive({...formDefault});
|
||||
const rules = {
|
||||
icon: [{required: true, message: "请选择图标"}],
|
||||
title: [{required: true, message: "标题不能为空"}],
|
||||
path: [{required: true, message: "路径不能为空"}],
|
||||
};
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
function showModal() {
|
||||
visible.value = true;
|
||||
}
|
||||
|
||||
function selectIcon(icon) {
|
||||
form.icon = icon;
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
Object.assign(form, formDefault);
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
emit("addQuickEntry", _.cloneDeep(form));
|
||||
onClose();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error", error);
|
||||
message.error("参数验证错误，请仔细填写表单数据!");
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang='less' scoped></style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<default-home-card
|
||||
:extra="`${editFlag ? '完成' : '编辑'}`"
|
||||
icon="ThunderboltTwoTone"
|
||||
title="快捷入口"
|
||||
@extraClick="editFlag = !editFlag"
|
||||
>
|
||||
<div class="quick-entry-list">
|
||||
<a-row>
|
||||
<a-col v-for="(item,index) in quickEntry" :key="index" span="4">
|
||||
<div class="quick-entry" @click="turnToPage(item.path)">
|
||||
<div class="icon">
|
||||
<component :is='$antIcons[item.icon]' :style="{ fontSize:'30px'}"/>
|
||||
<close-circle-outlined v-if="editFlag" class="delete-icon" @click="deleteQuickEntry(index)"/>
|
||||
</div>
|
||||
<span class="entry-title">{{ item.title }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col v-if="editFlag && quickEntry.length < maxCount" span="4">
|
||||
<div class="add-quick-entry" @click="addHomeQuickEntry">
|
||||
<div class="add-icon">
|
||||
<plus-outlined :style="{ fontSize:'30px'}"/>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</default-home-card>
|
||||
<HomeQuickEntryModal ref="homeQuickEntryModal" @addQuickEntry="addQuickEntry"/>
|
||||
</template>
|
||||
<script setup>
|
||||
import {onMounted, ref} from "vue";
|
||||
import {router} from "/@/router";
|
||||
import HomeQuickEntryModal from './home-quick-entry-modal.vue'
|
||||
import localKey from '/@/constants/local-storage-key-const';
|
||||
import {localRead, localSave} from '/@/utils/local-util';
|
||||
import _ from "lodash";
|
||||
import InitQuickEntryList from './init-quick-entry-list';
|
||||
import DefaultHomeCard from "/@/views/system/home/components/default-home-card.vue";
|
||||
|
||||
//---------------- 初始化展示 --------------------
|
||||
onMounted(() => {
|
||||
initQuickEntry();
|
||||
})
|
||||
let quickEntry = ref([])
|
||||
|
||||
function initQuickEntry() {
|
||||
let quickEntryJson = localRead(localKey.HOME_QUICK_ENTRY);
|
||||
if (!quickEntryJson) {
|
||||
quickEntry.value = _.cloneDeep(InitQuickEntryList);
|
||||
return;
|
||||
}
|
||||
let quickEntryList = JSON.parse(quickEntryJson);
|
||||
if (_.isEmpty(quickEntryList)) {
|
||||
quickEntry.value = _.cloneDeep(InitQuickEntryList);
|
||||
return;
|
||||
}
|
||||
quickEntry.value = quickEntryList;
|
||||
}
|
||||
|
||||
// 页面跳转
|
||||
function turnToPage(path) {
|
||||
if (editFlag.value) {
|
||||
return;
|
||||
}
|
||||
router.push({path});
|
||||
}
|
||||
|
||||
//---------------- 编辑快捷入口 --------------------
|
||||
let editFlag = ref(false);
|
||||
let maxCount = ref(6);
|
||||
|
||||
// 快捷入口删除
|
||||
function deleteQuickEntry(index) {
|
||||
quickEntry.value.splice(index, 1)
|
||||
localSave(localKey.HOME_QUICK_ENTRY, JSON.stringify(quickEntry.value));
|
||||
}
|
||||
|
||||
// 添加快捷入口
|
||||
let homeQuickEntryModal = ref();
|
||||
|
||||
function addHomeQuickEntry() {
|
||||
homeQuickEntryModal.value.showModal();
|
||||
}
|
||||
|
||||
function addQuickEntry(row) {
|
||||
quickEntry.value.push(row);
|
||||
localSave(localKey.HOME_QUICK_ENTRY, JSON.stringify(quickEntry.value));
|
||||
}
|
||||
</script>
|
||||
<style lang='less' scoped>
|
||||
.quick-entry-list {
|
||||
height: 100%;
|
||||
|
||||
.quick-entry {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
|
||||
.entry-title {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #F0FFFF;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
position: absolute;
|
||||
color: #F08080;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-quick-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.add-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: #fafafa;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: border-color .3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #A9A9A9;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
export default [
|
||||
{
|
||||
icon: 'CopyrightTwoTone',
|
||||
title: '菜单',
|
||||
path: '/menu/list'
|
||||
},
|
||||
{
|
||||
icon: 'ExperimentTwoTone',
|
||||
title: '请求',
|
||||
path: '/log/operate-log/list'
|
||||
},
|
||||
{
|
||||
icon: 'FireTwoTone',
|
||||
title: '缓存',
|
||||
path: '/support/cache/cache-list'
|
||||
},
|
||||
{
|
||||
icon: 'HourglassTwoTone',
|
||||
title: '字典',
|
||||
path: '/setting/dict'
|
||||
},
|
||||
{
|
||||
icon: 'MessageTwoTone',
|
||||
title: '单号',
|
||||
path: '/support/serial-number/serial-number-list'
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,158 @@
|
||||
<!--
|
||||
* 已办/代办
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-12 22:34:00
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
*
|
||||
-->
|
||||
<template>
|
||||
<default-home-card icon="StarTwoTone" title="已办待办">
|
||||
<div style="height: 280px;">
|
||||
<div class="center column">
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<div v-for="(item, index) in toDoList" :key="index" :class="['to-do', { done: item.doneFlag }]">
|
||||
<a-checkbox v-model:checked="item.doneFlag">
|
||||
<span class="task">{{ item.title }}</span>
|
||||
</a-checkbox>
|
||||
<div class="star-icon" @click="itemStar(item)">
|
||||
<StarFilled v-if="item.starFlag" style="color: #ff8c00" />
|
||||
<StarOutlined v-else style="color: #c0c0c0" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, index) in doneList" :key="index" :class="['to-do', { done: item.doneFlag }]">
|
||||
<a-checkbox v-model:checked="item.doneFlag">
|
||||
<span class="task">{{ item.title }}</span>
|
||||
</a-checkbox>
|
||||
<div class="star-icon" @click="itemStar(item)">
|
||||
<StarFilled v-if="item.starFlag" style="color: #ff8c00" />
|
||||
<StarOutlined v-else style="color: #c0c0c0" />
|
||||
</div>
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</default-home-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
let taskList = ref([
|
||||
{
|
||||
title: '周五下班前需要提交周报',
|
||||
doneFlag: true,
|
||||
starFlag: true,
|
||||
starTime: 0,
|
||||
},
|
||||
{
|
||||
title: '为SmartAdmin前端小组分配任务',
|
||||
doneFlag: false,
|
||||
starFlag: false,
|
||||
starTime: 0,
|
||||
},
|
||||
{
|
||||
title: '跟进团建内容事宜',
|
||||
doneFlag: false,
|
||||
starFlag: true,
|
||||
starTime: 0,
|
||||
},
|
||||
{
|
||||
title: '跟进客户定制一个软件平台',
|
||||
doneFlag: false,
|
||||
starFlag: false,
|
||||
starTime: 0,
|
||||
},
|
||||
{
|
||||
title: '下个版本的需求确认',
|
||||
doneFlag: false,
|
||||
starFlag: false,
|
||||
starTime: 0,
|
||||
},
|
||||
{
|
||||
title: '线上版本发布',
|
||||
doneFlag: true,
|
||||
starFlag: true,
|
||||
starTime: dayjs().unix(),
|
||||
},
|
||||
{
|
||||
title: '周一财务报销',
|
||||
doneFlag: true,
|
||||
starFlag: false,
|
||||
starTime: 0,
|
||||
},
|
||||
]);
|
||||
|
||||
let toDoList = computed(() => {
|
||||
return taskList.value.filter((e) => !e.doneFlag).sort((a, b) => b.starTime - a.starTime);
|
||||
});
|
||||
|
||||
let doneList = computed(() => {
|
||||
return taskList.value.filter((e) => e.doneFlag);
|
||||
});
|
||||
|
||||
function itemStar(item) {
|
||||
item.starFlag = !item.starFlag;
|
||||
if (item.starFlag) {
|
||||
item.starTime = dayjs().unix();
|
||||
}
|
||||
}
|
||||
|
||||
//-------------------------任务新建-----------------------
|
||||
let taskTitle = ref('');
|
||||
function addTask() {
|
||||
if (!taskTitle.value) {
|
||||
message.warn('请输入任务标题');
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
title: taskTitle.value,
|
||||
doneFlag: false,
|
||||
starFlag: false,
|
||||
starTime: 0,
|
||||
};
|
||||
taskList.value.unshift(data);
|
||||
taskTitle.value = '';
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
&.column {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.to-do {
|
||||
width: 100%;
|
||||
border: 1px solid #d3d3d3;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.star-icon {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.done {
|
||||
text-decoration: line-through;
|
||||
color: #8c8c8c;
|
||||
|
||||
.task {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,159 @@
|
||||
<!--
|
||||
* 首页 用户头部信息
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-12 22:34:00
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
*
|
||||
-->
|
||||
<template>
|
||||
<div class="user-header">
|
||||
<a-page-header :title="welcomeSentence" :sub-title="departmentName" >
|
||||
<template #tags>
|
||||
<a-tag color="blue">努力工作</a-tag>
|
||||
<a-tag color="success">主动 / 皮实 / 可靠 </a-tag>
|
||||
<a-tag color="error">自省 / 精进 / 创新</a-tag>
|
||||
</template>
|
||||
<template #extra>
|
||||
<p>{{ dayInfo }}</p>
|
||||
</template>
|
||||
<a-row class="content">
|
||||
<span class="heart-sentence">
|
||||
<h3>{{ heartSentence }}</h3>
|
||||
<p class="last-login-info">{{ lastLoginInfo }}</p>
|
||||
<div></div>
|
||||
</span>
|
||||
<div class="weather">
|
||||
<iframe
|
||||
width="100%"
|
||||
scrolling="no"
|
||||
height="60"
|
||||
frameborder="0"
|
||||
allowtransparency="true"
|
||||
src="//i.tianqi.com/index.php?c=code&id=12&icon=1&num=5&site=12"
|
||||
></iframe>
|
||||
</div>
|
||||
</a-row>
|
||||
</a-page-header>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed } from 'vue-demi';
|
||||
import { useUserStore } from '/@/store/modules/system/user';
|
||||
import uaparser from 'ua-parser-js';
|
||||
import { Solar, Lunar } from 'lunar-javascript';
|
||||
import _ from 'lodash';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const departmentName = computed(() => useUserStore.departmentName);
|
||||
|
||||
// 欢迎语
|
||||
const welcomeSentence = computed(() => {
|
||||
let sentence = '';
|
||||
let now = new Date().getHours();
|
||||
if (now > 0 && now <= 6) {
|
||||
sentence = '午夜好，';
|
||||
} else if (now > 6 && now <= 11) {
|
||||
sentence = '早上好，';
|
||||
} else if (now > 11 && now <= 14) {
|
||||
sentence = '中午好，';
|
||||
} else if (now > 14 && now <= 18) {
|
||||
sentence = '下午好，';
|
||||
} else {
|
||||
sentence = '晚上好，';
|
||||
}
|
||||
return sentence + userStore.$state.actualName;
|
||||
});
|
||||
|
||||
//上次登录信息
|
||||
const lastLoginInfo = computed(() => {
|
||||
let info = '';
|
||||
if (userStore.$state.lastLoginTime) {
|
||||
info = info + '上次登录:' + userStore.$state.lastLoginTime;
|
||||
}
|
||||
if (userStore.$state.lastLoginIp) {
|
||||
info = info + '; IP:' + userStore.$state.lastLoginIp;
|
||||
}
|
||||
if (userStore.$state.lastLoginUserAgent) {
|
||||
let ua = uaparser(userStore.$state.lastLoginUserAgent);
|
||||
info = info + '; 设备:';
|
||||
if (ua.browser.name) {
|
||||
info = info + ' ' + ua.browser.name;
|
||||
}
|
||||
if (ua.os.name) {
|
||||
info = info + ' ' + ua.os.name;
|
||||
}
|
||||
let device = ua.device.vendor ? ua.device.vendor + ua.device.model : null;
|
||||
if (device) {
|
||||
info = info + ' ' + device;
|
||||
}
|
||||
}
|
||||
return info;
|
||||
});
|
||||
|
||||
//日期、节日、节气
|
||||
const dayInfo = computed(() => {
|
||||
//阳历
|
||||
let solar = Solar.fromDate(new Date());
|
||||
let day = solar.toString();
|
||||
let week = solar.getWeekInChinese();
|
||||
//阴历
|
||||
let lunar = Lunar.fromDate(new Date());
|
||||
let lunarMonth = lunar.getMonthInChinese();
|
||||
let lunarDay = lunar.getDayInChinese();
|
||||
//节气
|
||||
let jieqi = lunar.getPrevJieQi().getName();
|
||||
let next = lunar.getNextJieQi();
|
||||
let nextJieqi = next.getName() + ' ' + next.getSolar().toYmd();
|
||||
|
||||
return `${day} 星期${week}，农历${lunarMonth}${lunarDay}（当前${jieqi}，${nextJieqi} ）`;
|
||||
});
|
||||
|
||||
// 毒鸡汤
|
||||
const heartSentenceArray = [
|
||||
'每个人的一生好比一根蜡烛，看似不经意间散发的光和热，都可能照亮和温暖他人。这是生活赋予我们的智慧，也让我们在寻常的日子成为一个温暖善良的人。',
|
||||
'立规矩的目的，不是禁锢、限制，而是教育；孩子犯了错，父母不能帮孩子逃避，而应该让孩子学会承担责任。让孩子有面对错误的诚实和勇气，这才是立规矩的意义所在。',
|
||||
'人这一辈子，格局大了、善良有了，成功自然也就近了。格局越大，人生越宽。你的人生会是什么样，与你在为人处世时的表现有很大关系。世间美好都是环环相扣的，善良的人总不会被亏待。',
|
||||
'平日里的千锤百炼，才能托举出光彩时刻；逆境中的亮剑、失败后的奋起，才能让梦想成真。哪有什么一战成名，其实都是百炼成钢。“天才”都是汗水浇灌出来的，天赋或许可以决定起点，但唯有坚持和努力才能达到终点。',
|
||||
'家，不在于奢华，而在于温馨；家，不在于大小，而在于珍惜。在家里，有父母的呵护，有爱人的陪伴，有子女的欢笑。一家人整整齐齐、和和睦睦，就是人生最大的幸福！',
|
||||
'每一个不向命运低头、努力生活的人，都值得被尊重。',
|
||||
'青年的肩上，从不只有清风明月，更有责任担当。岁月因青春慨然以赴而更加美好，世间因少年挺身向前而更加瑰丽。请相信，不会有人永远年轻，但永远有人年轻。',
|
||||
'人生路上，总有人走得比你快，但不必介意，也不必着急。一味羡慕别人的成绩，只会给自己平添压力、徒增烦恼。不盲从别人的脚步，坚定目标，才能找到自己的节奏，进而逢山开路、遇水搭桥。',
|
||||
'如果你真的在乎一个人，首先要学会的就是感恩对方的好。这样，对方才会在和你的相处中找到价值感，相处起来也会更加舒适愉悦。',
|
||||
'一个人只有心里装得下别人，有换位思考的品质，有为他人谋幸福的信念，才能真正做到慷慨施予。同样，也只有赠人玫瑰而无所求时，你才会手有余香、真有所得。',
|
||||
];
|
||||
const heartSentence = computed(() => {
|
||||
return heartSentenceArray[_.random(0, heartSentenceArray.length - 1)];
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.user-header {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.heart-sentence {
|
||||
width: calc(100% - 500px);
|
||||
h3 {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.weather {
|
||||
width: 440px;
|
||||
}
|
||||
}
|
||||
|
||||
.last-login-info {
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!--
|
||||
* 首页的 通知公告
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-12 22:34:00
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
*
|
||||
-->
|
||||
<template>
|
||||
<default-home-card extra="更多" icon="SoundTwoTone" title="通知公告" @extraClick="onMore">
|
||||
<a-spin :spinning="loading">
|
||||
<div class="content-wrapper">
|
||||
<a-empty v-if="$lodash.isEmpty(data)" />
|
||||
<ul v-else>
|
||||
<li v-for="(item, index) in data" :key="index" :class="[item.viewFlag ? 'read' : 'un-read']">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>{{ item.title }}</span>
|
||||
</template>
|
||||
<a class="content" @click="toDetail(item.noticeId)">
|
||||
<a-badge :status="item.viewFlag ? 'default' : 'error'" />
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<span class="time"> {{ item.publishDate }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a-spin>
|
||||
</default-home-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { noticeApi } from '/@/api/business/oa/notice-api';
|
||||
import { smartSentry } from '/@/lib/smart-sentry';
|
||||
import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
|
||||
|
||||
const props = defineProps({
|
||||
noticeTypeId: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const queryForm = {
|
||||
noticeTypeId: props.noticeTypeId,
|
||||
pageNum: 1,
|
||||
pageSize: 6,
|
||||
searchCount: false,
|
||||
};
|
||||
|
||||
let data = ref([]);
|
||||
|
||||
const loading = ref(false);
|
||||
// 查询列表
|
||||
async function queryNoticeList() {
|
||||
try {
|
||||
loading.value = true;
|
||||
const result = await noticeApi.queryEmployeeNotice(queryForm);
|
||||
data.value = result.data.list;
|
||||
} catch (err) {
|
||||
smartSentry.captureError(err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
queryNoticeList();
|
||||
});
|
||||
|
||||
// 查看更多
|
||||
function onMore() {
|
||||
router.push({
|
||||
path: '/oa/notice/notice-employee-list',
|
||||
});
|
||||
}
|
||||
|
||||
// 进入详情
|
||||
const router = useRouter();
|
||||
function toDetail(noticeId) {
|
||||
router.push({
|
||||
path: '/oa/notice/notice-employee-detail',
|
||||
query: { noticeId },
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@read-color: #666;
|
||||
.content-wrapper{
|
||||
height: 150px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
ul li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.content {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.time {
|
||||
flex-shrink: 0;
|
||||
color: @read-color;
|
||||
min-width: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
ul li :hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.un-read a {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.read a {
|
||||
color: @read-color;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
.no-footer {
|
||||
:deep(.ant-card-body) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 150px;
|
||||
|
||||
&.large {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
&.statistice {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&.app {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 24px;
|
||||
.app-qr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-right: 40px;
|
||||
> img {
|
||||
height: 120px;
|
||||
}
|
||||
> span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.gauge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.wait-handle {
|
||||
padding-bottom: 24px;
|
||||
overflow-y: auto;
|
||||
> p {
|
||||
font-size: 18px;
|
||||
}
|
||||
:deep(.ant-tag) {
|
||||
padding: 1px 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
width: 100%;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
padding: 10px 0;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
<!--
|
||||
* 首页
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-12 22:34:00
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
*
|
||||
-->
|
||||
<template>
|
||||
<!-- 顶部用户信息-->
|
||||
<a-row>
|
||||
<HomeHeader />
|
||||
</a-row>
|
||||
<!--下方左右布局-->
|
||||
<a-row :gutter="[10, 10]">
|
||||
<!--左侧-->
|
||||
<a-col :span="16">
|
||||
<a-row :gutter="[10, 10]">
|
||||
<!--公告信息-->
|
||||
<a-col :span="12">
|
||||
<HomeNotice title="公告" :noticeTypeId="1" />
|
||||
</a-col>
|
||||
<!--企业动态-->
|
||||
<a-col :span="12">
|
||||
<HomeNotice title="通知" :noticeTypeId="2" />
|
||||
</a-col>
|
||||
<!--各类报表-->
|
||||
<!-- <a-col :span="6">
|
||||
<Gauge :percent="saleTargetPercent" />
|
||||
</a-col> -->
|
||||
<a-col :span="12">
|
||||
<Pie />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<Category />
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<Gradient />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<!--右侧-->
|
||||
<a-col :span="8">
|
||||
<a-row :gutter="[10, 10]">
|
||||
<!--快捷入口-->
|
||||
<!-- <a-col :span="24">
|
||||
<HomeQuickEntry />
|
||||
</a-col> -->
|
||||
<!--关注公众号-->
|
||||
<a-col :span="24">
|
||||
<OfficialAccountCard />
|
||||
</a-col>
|
||||
<!--待办、已办-->
|
||||
<a-col :span="24">
|
||||
<ToBeDoneCard />
|
||||
</a-col>
|
||||
<!--更新日志-->
|
||||
<a-col :span="24">
|
||||
<ChangelogCard />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import HomeHeader from './home-header.vue';
|
||||
import HomeNotice from './home-notice.vue';
|
||||
import HomeQuickEntry from './components/quick-entry/home-quick-entry.vue';
|
||||
import OfficialAccountCard from './components/official-account-card.vue';
|
||||
import ToBeDoneCard from './components/to-be-done-card.vue';
|
||||
import ChangelogCard from './components/changelog-card.vue';
|
||||
import Gauge from './components/echarts/gauge.vue';
|
||||
import Category from './components/echarts/category.vue';
|
||||
import Pie from './components/echarts/pie.vue';
|
||||
import Gradient from './components/echarts/gradient.vue';
|
||||
// 业绩完成百分比
|
||||
const saleTargetPercent = computed(() => {
|
||||
return 75;
|
||||
});
|
||||
defineExpose({});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './index.less';
|
||||
</style>
|
||||
Reference in New Issue
Block a user