mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 21:22:33 +08:00
✨ Introducing new features. 删除没用的页面
This commit is contained in:
aeizzz
parent
b090cbc44f
commit
763c416826
@ -1,434 +0,0 @@
|
||||
.chart-scrollbar {
|
||||
.chart-warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.chart-warp-bottom {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
.big-data-down-left,
|
||||
.big-data-down-right {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.flex-warp-item {
|
||||
padding: 0 7.5px 15px 15px;
|
||||
width: 100%;
|
||||
height: 33.33%;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--el-color-white);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.flex-title {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.flex-title-small {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.flex-content {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
.flex-content-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-left {
|
||||
color: var(--el-text-color-primary);
|
||||
.sky {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.sky-left {
|
||||
font-size: 30px;
|
||||
}
|
||||
.sky-center {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
font {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.span {
|
||||
background: #22bc76;
|
||||
border-radius: 2px;
|
||||
padding: 0 5px;
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
.sky-right {
|
||||
span {
|
||||
font-size: 30px;
|
||||
}
|
||||
font {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sky-dd {
|
||||
.sky-dl {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
overflow: hidden;
|
||||
div {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.sky-dl-first {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.d-states {
|
||||
display: flex;
|
||||
.d-states-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
i {
|
||||
font-size: 20px;
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
flex-shrink: 1;
|
||||
color: var(--el-color-white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.i-bg1 {
|
||||
background: #22bc76;
|
||||
}
|
||||
.i-bg2 {
|
||||
background: #e2356d;
|
||||
}
|
||||
.i-bg3 {
|
||||
background: #43bbef;
|
||||
}
|
||||
.d-states-flex {
|
||||
overflow: hidden;
|
||||
padding: 0 10px 0;
|
||||
.d-states-item-label {
|
||||
color: var(--el-color-primary);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.d-states-item-value {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 3px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.d-btn {
|
||||
margin-top: 5px;
|
||||
.d-btn-item {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 35px;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.3s;
|
||||
color: var(--el-color-primary);
|
||||
.d-btn-item-left {
|
||||
font-size: 20px;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.d-btn-item-center {
|
||||
padding: 0 10px;
|
||||
flex: 1;
|
||||
}
|
||||
.d-btn-item-eight {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-center {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.big-data-down-center-one {
|
||||
height: 66.67%;
|
||||
padding: 0 7.5px 15px;
|
||||
.big-data-down-center-one-content {
|
||||
height: 100%;
|
||||
background: var(--el-color-white);
|
||||
padding: 15px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-center-two {
|
||||
padding: 0 7.5px 15px;
|
||||
height: 33.33%;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--el-color-white);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.flex-title {
|
||||
margin-bottom: 15px;
|
||||
color: var(--el-text-color-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.flex-title-small {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.flex-content {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
height: calc(100% - 30px);
|
||||
.flex-content-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
.monitor-item {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.monitor-wave {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
background-color: var(--el-color-primary);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #f4f4f4;
|
||||
animation: roateOne 10s linear infinite;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
&::before {
|
||||
bottom: 10px;
|
||||
border-radius: 60%;
|
||||
}
|
||||
&::after {
|
||||
bottom: 8px;
|
||||
opacity: 0.7;
|
||||
border-radius: 37%;
|
||||
}
|
||||
.monitor-z-index {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@keyframes roateOne {
|
||||
0% {
|
||||
transform: translate(-50%, 0) rotateZ(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -2%) rotateZ(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, 0%) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
.monitor-active {
|
||||
background-color: #22bc76;
|
||||
.monitor-z-index {
|
||||
color: #22bc76;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex-content-right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-right {
|
||||
.flex-warp-item {
|
||||
padding: 0 15px 15px 7.5px;
|
||||
.flex-title {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.flex-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.task {
|
||||
display: flex;
|
||||
height: 45px;
|
||||
.task-item {
|
||||
flex: 1;
|
||||
color: var(--el-color-white);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.task-item-box {
|
||||
position: relative;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
left: -50%;
|
||||
top: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50% 50%, 50% 50%;
|
||||
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
||||
background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
|
||||
linear-gradient(#ffb980, #ffb980);
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
width: calc(100% - 2px);
|
||||
height: calc(100% - 2px);
|
||||
border-radius: 100%;
|
||||
}
|
||||
.task-item-value {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.task-item-label {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.task1 {
|
||||
&::after {
|
||||
background: #5492be;
|
||||
}
|
||||
}
|
||||
.task2 {
|
||||
&::after {
|
||||
background: #43a177;
|
||||
}
|
||||
}
|
||||
.task3 {
|
||||
&::after {
|
||||
background: #a76077;
|
||||
}
|
||||
}
|
||||
}
|
||||
.task-first-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
color: var(--el-color-primary);
|
||||
.task-first {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
color: var(--el-text-color-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
margin-top: 15px;
|
||||
.progress-item {
|
||||
height: 33.33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.progress-box {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
:deep(.el-progress__text) {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 12px !important;
|
||||
text-align: right;
|
||||
}
|
||||
:deep(.el-progress-bar__outer) {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
:deep(.el-progress-bar) {
|
||||
margin-right: -22px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
/**
|
||||
* sky 天气
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const skyList = [
|
||||
{
|
||||
v1: '时间',
|
||||
v2: '天气',
|
||||
v3: '温度',
|
||||
v5: '降水',
|
||||
v7: '风力',
|
||||
type: 'title',
|
||||
},
|
||||
{
|
||||
v1: '今天',
|
||||
v2: 'ele-Sunny',
|
||||
v3: '20°/26°',
|
||||
v5: '50%',
|
||||
v7: '13m/s',
|
||||
},
|
||||
{
|
||||
v1: '明天',
|
||||
v2: 'ele-Lightning',
|
||||
v3: '20°/26°',
|
||||
v5: '50%',
|
||||
v7: '13m/s',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 当前设置状态
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const dBtnList = [
|
||||
{
|
||||
v2: '阳光玫瑰种植',
|
||||
v3: '126天',
|
||||
v4: '设备在线',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 当前设备监测
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const chartData4List = [
|
||||
{
|
||||
label: '温度',
|
||||
},
|
||||
{
|
||||
label: '光照',
|
||||
},
|
||||
{
|
||||
label: '湿度',
|
||||
},
|
||||
{
|
||||
label: '风力',
|
||||
},
|
||||
];
|
||||
@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div class="big-data-up mb15">
|
||||
<div class="up-left">
|
||||
<i class="el-icon-time mr5"></i>
|
||||
<span>{{ state.time.txt }}</span>
|
||||
</div>
|
||||
<div class="up-center">
|
||||
<span>智慧农业系统平台</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="chartHead">
|
||||
import { reactive, onBeforeMount, onUnmounted } from 'vue';
|
||||
import { formatDate } from '/@/utils/formatTime';
|
||||
|
||||
// 定义变量内容
|
||||
const state = reactive({
|
||||
time: {
|
||||
txt: '',
|
||||
fun: 0,
|
||||
},
|
||||
});
|
||||
|
||||
// 初始化时间
|
||||
const initTime = () => {
|
||||
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
|
||||
state.time.fun = window.setInterval(() => {
|
||||
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
|
||||
}, 1000);
|
||||
};
|
||||
// 页面加载前
|
||||
onBeforeMount(() => {
|
||||
initTime();
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
window.clearInterval(state.time.fun);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.big-data-up {
|
||||
height: 55px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
color: var(--el-color-primary);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.up-left {
|
||||
position: absolute;
|
||||
}
|
||||
.up-center {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
letter-spacing: 5px;
|
||||
background-image: -webkit-linear-gradient(
|
||||
left,
|
||||
var(--el-color-primary),
|
||||
var(--el-color-primary-light-3) 25%,
|
||||
var(--el-color-primary) 50%,
|
||||
var(--el-color-primary-light-3) 75%,
|
||||
var(--el-color-primary)
|
||||
);
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
background-size: 200% 100%;
|
||||
-webkit-animation: masked-animation-data-v-b02d8052 4s linear infinite;
|
||||
animation: masked-animation-data-v-b02d8052 4s linear infinite;
|
||||
-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(transparent), to(hsla(0, 0%, 100%, 0.1)));
|
||||
position: relative;
|
||||
@keyframes masked-animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 1px transparent solid;
|
||||
border-image: linear-gradient(to right, var(--el-color-primary-light-9), var(--el-color-primary)) 1 10;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,477 +0,0 @@
|
||||
<template>
|
||||
<div class="chart-scrollbar layout-padding">
|
||||
<div class="chart-warp layout-padding-auto layout-padding-view">
|
||||
<div class="chart-warp-top">
|
||||
<ChartHead />
|
||||
</div>
|
||||
<div class="chart-warp-bottom">
|
||||
<!-- 左边 -->
|
||||
<div class="big-data-down-left">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">天气预报</div>
|
||||
<div class="flex-content">
|
||||
<div class="sky">
|
||||
<SvgIcon name="ele-Sunny" class="sky-left" />
|
||||
<div class="sky-center">
|
||||
<div class="mb2">
|
||||
<span>多云转晴</span>
|
||||
<span>东南风</span>
|
||||
<span class="span ml5">良</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sky-right">
|
||||
<span>25</span>
|
||||
<span>°C</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sky-dd">
|
||||
<div class="sky-dl" v-for="(v, k) in state.skyList" :key="k" :class="{ 'sky-dl-first': k === 1 }">
|
||||
<div>{{ v.v1 }}</div>
|
||||
<div v-if="v.type === 'title'">{{ v.v2 }}</div>
|
||||
<div v-else>
|
||||
<SvgIcon :name="v.v2" />
|
||||
</div>
|
||||
<div>{{ v.v3 }}</div>
|
||||
<div class="tip">{{ v.v5 }}</div>
|
||||
<div>{{ v.v7 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">当前设备状态</div>
|
||||
<div class="flex-content flex-content-overflow">
|
||||
<div class="d-states">
|
||||
<div class="d-states-item">
|
||||
<SvgIcon name="ele-Odometer" class="i-bg1" />
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">园区设备数</div>
|
||||
<div class="d-states-item-value">99</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-states-item">
|
||||
<SvgIcon name="ele-FirstAidKit" class="i-bg2" />
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">预警设备数</div>
|
||||
<div class="d-states-item-value">10</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-states-item">
|
||||
<SvgIcon name="ele-VideoPlay" class="i-bg3" />
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">运行设备数</div>
|
||||
<div class="d-states-item-value">20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-btn">
|
||||
<div class="d-btn-item" v-for="(v, k) in state.dBtnList" :key="k">
|
||||
<i class="d-btn-item-left el-icon-money"></i>
|
||||
<div class="d-btn-item-center">
|
||||
<div>{{ v.v2 }}|{{ v.v3 }}</div>
|
||||
</div>
|
||||
<div class="d-btn-item-eight">{{ v.v4 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">近30天预警总数</div>
|
||||
<div class="flex-content">
|
||||
<div style="height: 100%" ref="chartsWarningRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间 -->
|
||||
<div class="big-data-down-center">
|
||||
<div class="big-data-down-center-one">
|
||||
<div class="big-data-down-center-one-content">
|
||||
<div style="height: 100%" ref="chartsCenterOneRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="big-data-down-center-two">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">
|
||||
<span>当前设备监测</span>
|
||||
<span class="flex-title-small">单位：次</span>
|
||||
</div>
|
||||
<div class="flex-content">
|
||||
<div class="flex-content-left">
|
||||
<div class="monitor-item" v-for="(v, k) in state.chartData4List" :key="k">
|
||||
<div class="monitor-wave">
|
||||
<div class="monitor-z-index">
|
||||
<div class="monitor-item-label">{{ v.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-content-right">
|
||||
<div style="height: 100%" ref="chartsMonitorRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右边 -->
|
||||
<div class="big-data-down-right">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">
|
||||
<span>近7天产品追溯扫码统计</span>
|
||||
<span class="flex-title-small">单位：次</span>
|
||||
</div>
|
||||
<div class="flex-content">
|
||||
<div style="height: 100%" ref="chartsSevenDaysRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">当前任务统计</div>
|
||||
<div class="flex-content">
|
||||
<div class="task">
|
||||
<div class="task-item task-first-item">
|
||||
<div class="task-item-value task-first">25</div>
|
||||
<div class="task-item-label">待办任务</div>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<div class="task-item-box task1">
|
||||
<div class="task-item-value">12</div>
|
||||
<div class="task-item-label">施肥</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<div class="task-item-box task2">
|
||||
<div class="task-item-value">3</div>
|
||||
<div class="task-item-label">施药</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<div class="task-item-box task3">
|
||||
<div class="task-item-value">5</div>
|
||||
<div class="task-item-label">农事</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-item">
|
||||
<span>施肥率</span>
|
||||
<div class="progress-box">
|
||||
<el-progress :percentage="70" color="#43bdf0"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>施药率</span>
|
||||
<div class="progress-box">
|
||||
<el-progress :percentage="36" color="#43bdf0"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>农事率</span>
|
||||
<div class="progress-box">
|
||||
<el-progress :percentage="91" color="#43bdf0"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">
|
||||
<span>近7天投入品记录</span>
|
||||
<span class="flex-title-small">单位：件</span>
|
||||
</div>
|
||||
<div class="flex-content">
|
||||
<div style="height: 100%" ref="chartsInvestmentRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="chartIndex">
|
||||
import { defineAsyncComponent, reactive, onMounted, watch, nextTick, onActivated, ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-wordcloud';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
import { skyList, dBtnList, chartData4List } from '/@/views/chart/chart';
|
||||
|
||||
// 引入组件
|
||||
const ChartHead = defineAsyncComponent(() => import('/@/views/chart/head.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const chartsCenterOneRef = ref();
|
||||
const chartsSevenDaysRef = ref();
|
||||
const chartsWarningRef = ref();
|
||||
const chartsMonitorRef = ref();
|
||||
const chartsInvestmentRef = ref();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state = reactive({
|
||||
skyList,
|
||||
dBtnList,
|
||||
chartData4List,
|
||||
myCharts: [] as EmptyArrayType,
|
||||
});
|
||||
|
||||
// 初始化中间图表1
|
||||
const initChartsCenterOne = () => {
|
||||
const myChart = echarts.init(chartsCenterOneRef.value);
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {},
|
||||
series: [
|
||||
{
|
||||
type: 'wordCloud',
|
||||
sizeRange: [12, 40],
|
||||
rotationRange: [0, 0],
|
||||
rotationStep: 45,
|
||||
gridSize: Math.random() * 20 + 5,
|
||||
shape: 'circle',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
textStyle: {
|
||||
fontFamily: 'sans-serif',
|
||||
fontWeight: 'bold',
|
||||
color: function () {
|
||||
return `rgb(${[Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',')})`;
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: 'vue-next-admin', value: 520 },
|
||||
{ name: 'lyt', value: 520 },
|
||||
{ name: 'next-admin', value: 500 },
|
||||
{ name: '更名', value: 420 },
|
||||
{ name: '智慧农业', value: 520 },
|
||||
{ name: '男神', value: 2.64 },
|
||||
{ name: '好身材', value: 4.03 },
|
||||
{ name: '校草', value: 24.95 },
|
||||
{ name: '酷', value: 4.04 },
|
||||
{ name: '时尚', value: 5.27 },
|
||||
{ name: '阳光活力', value: 5.8 },
|
||||
{ name: '初恋', value: 3.09 },
|
||||
{ name: '英俊潇洒', value: 24.71 },
|
||||
{ name: '霸气', value: 6.33 },
|
||||
{ name: '腼腆', value: 2.55 },
|
||||
{ name: '蠢萌', value: 3.88 },
|
||||
{ name: '青春', value: 8.04 },
|
||||
{ name: '网红', value: 5.87 },
|
||||
{ name: '萌', value: 6.97 },
|
||||
{ name: '认真', value: 2.53 },
|
||||
{ name: '古典', value: 2.49 },
|
||||
{ name: '温柔', value: 3.91 },
|
||||
{ name: '有个性', value: 3.25 },
|
||||
{ name: '可爱', value: 9.93 },
|
||||
{ name: '幽默诙谐', value: 3.65 },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
state.myCharts.push(myChart);
|
||||
};
|
||||
// 初始化近7天产品追溯扫码统计
|
||||
const initChartsSevenDays = () => {
|
||||
const myChart = echarts.init(chartsSevenDaysRef.value);
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [12, 32, 11, 34, 90, 23, 21],
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [22, 82, 91, 24, 90, 30, 30],
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [50, 32, 18, 14, 90, 30, 50],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
state.myCharts.push(myChart);
|
||||
};
|
||||
// 初始化近30天预警总数
|
||||
const initChartsWarning = () => {
|
||||
const myChart = echarts.init(chartsWarningRef.value);
|
||||
const option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 20,
|
||||
bottom: 30,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '面积模式',
|
||||
type: 'pie',
|
||||
radius: [20, 50],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 8,
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: '监测设备预警' },
|
||||
{ value: 38, name: '天气预警' },
|
||||
{ value: 32, name: '任务预警' },
|
||||
{ value: 30, name: '病虫害预警' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
state.myCharts.push(myChart);
|
||||
};
|
||||
// 初始化当前设备监测
|
||||
const initChartsMonitor = () => {
|
||||
const myChart = echarts.init(chartsMonitorRef.value);
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
itemStyle: {
|
||||
color: '#289df5',
|
||||
borderColor: '#289df5',
|
||||
areaStyle: {
|
||||
type: 'default',
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
data: [20, 32, 31, 34, 12, 13, 20],
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
state.myCharts.push(myChart);
|
||||
};
|
||||
// 初始化近7天投入品记录
|
||||
const initChartsInvestment = () => {
|
||||
const myChart = echarts.init(chartsInvestmentRef.value);
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20, 15, 80, 70, 11, 30],
|
||||
type: 'bar',
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
state.myCharts.push(myChart);
|
||||
};
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResizeFun = () => {
|
||||
nextTick(() => {
|
||||
for (let i = 0; i < state.myCharts.length; i++) {
|
||||
state.myCharts[i].resize();
|
||||
}
|
||||
});
|
||||
};
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResize = () => {
|
||||
window.addEventListener('resize', initEchartsResizeFun);
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initChartsCenterOne();
|
||||
initChartsSevenDays();
|
||||
initChartsWarning();
|
||||
initChartsMonitor();
|
||||
initChartsInvestment();
|
||||
initEchartsResize();
|
||||
});
|
||||
// 由于页面缓存原因，keep-alive
|
||||
onActivated(() => {
|
||||
initEchartsResizeFun();
|
||||
});
|
||||
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
|
||||
watch(
|
||||
() => isTagsViewCurrenFull.value,
|
||||
() => {
|
||||
initEchartsResizeFun();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './chart.scss';
|
||||
</style>
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div class="layout-pd">
|
||||
<el-card shadow="hover" header="复制剪切演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-clipboard3`，项目地址：https://github.com/JamieCurnow/vue-clipboard3`"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<el-input placeholder="请输入内容" v-model="state.copyVal">
|
||||
<template #append>
|
||||
<el-button @click="copyText(state.copyVal)">复制链接</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input placeholder="先点击上方 `复制链接` 按钮，然后 `Ctrl + V` 进行粘贴！ " v-model="state.shearVal" class="mt15"> </el-input>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="funClipboard">
|
||||
import { reactive } from 'vue';
|
||||
import commonFunction from '/@/utils/commonFunction';
|
||||
|
||||
// 定义变量内容
|
||||
const { copyText } = commonFunction();
|
||||
const state = reactive({
|
||||
copyVal: 'https://gitee.com/lyt-top/vue-next-admin',
|
||||
shearVal: '',
|
||||
});
|
||||
</script>
|
||||
@ -1,152 +0,0 @@
|
||||
<template>
|
||||
<div class="layout-pd">
|
||||
<el-card shadow="hover" header="数字滚动演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `countup.js`，项目地址：https://github.com/inorganik/countUp.js"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="6" class="mb15" v-for="(v, k) in state.topCardItemList" :key="k">
|
||||
<div class="countup-card-item countup-card-item-box" :style="{ background: `var(${v.color})` }">
|
||||
<div class="countup-card-item-flex" ref="topCardItemRefs">
|
||||
<div class="countup-card-item-title pb3">{{ v.title }}</div>
|
||||
<div class="countup-card-item-title-num pb6"></div>
|
||||
<div class="countup-card-item-tip pb3">{{ v.tip }}</div>
|
||||
<div class="countup-card-item-tip-num"></div>
|
||||
</div>
|
||||
<i :class="v.icon" :style="{ color: v.iconColor }"></i>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default" @click="refreshCurrent">
|
||||
<el-icon>
|
||||
<ele-RefreshRight />
|
||||
</el-icon>
|
||||
重置/刷新数值
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="funCountup">
|
||||
import { reactive, onMounted, nextTick, ref } from 'vue';
|
||||
import { CountUp } from 'countup.js';
|
||||
|
||||
// 定义变量内容
|
||||
const topCardItemRefs = ref<RefType[]>([]);
|
||||
const state = reactive({
|
||||
topCardItemList: [
|
||||
{
|
||||
title: '今日访问人数',
|
||||
titleNum: '123',
|
||||
tip: '在场人数',
|
||||
tipNum: '911',
|
||||
color: '--el-color-primary',
|
||||
iconColor: '#ffcb47',
|
||||
icon: 'iconfont icon-jinridaiban',
|
||||
},
|
||||
{
|
||||
title: '实验室总数',
|
||||
titleNum: '123',
|
||||
tip: '使用中',
|
||||
tipNum: '611',
|
||||
color: '--el-color-success',
|
||||
iconColor: '#70cf41',
|
||||
icon: 'iconfont icon-AIshiyanshi',
|
||||
},
|
||||
{
|
||||
title: '申请人数（月）',
|
||||
titleNum: '123',
|
||||
tip: '通过人数',
|
||||
tipNum: '911',
|
||||
color: '--el-color-warning',
|
||||
iconColor: '#dfae64',
|
||||
icon: 'iconfont icon-shenqingkaiban',
|
||||
},
|
||||
{
|
||||
title: '销售情况',
|
||||
titleNum: '123',
|
||||
tip: '销售数',
|
||||
tipNum: '911',
|
||||
color: '--el-color-danger',
|
||||
iconColor: '#e56565',
|
||||
icon: 'iconfont icon-ditu',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 初始化数字滚动
|
||||
const initNumCountUp = () => {
|
||||
nextTick(() => {
|
||||
topCardItemRefs.value.forEach((v: HTMLDivElement) => {
|
||||
new CountUp(v.querySelector('.countup-card-item-title-num') as HTMLDivElement, Math.random() * 10000).start();
|
||||
new CountUp(v.querySelector('.countup-card-item-tip-num') as HTMLDivElement, Math.random() * 1000).start();
|
||||
});
|
||||
});
|
||||
};
|
||||
// 重置/刷新数值
|
||||
const refreshCurrent = () => {
|
||||
initNumCountUp();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initNumCountUp();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.countup-card-item {
|
||||
width: 100%;
|
||||
height: 103px;
|
||||
background: var(--el-text-color-secondary);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
.countup-card-item-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.countup-card-item-flex {
|
||||
padding: 0 20px;
|
||||
color: var(--el-color-white);
|
||||
.countup-card-item-title,
|
||||
.countup-card-item-tip {
|
||||
font-size: 13px;
|
||||
}
|
||||
.countup-card-item-title-num {
|
||||
font-size: 18px;
|
||||
}
|
||||
.countup-card-item-tip-num {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<div class="croppers-container layout-pd">
|
||||
<el-card shadow="hover" header="cropper 图片裁剪">
|
||||
<el-alert
|
||||
title="感谢优秀的 `cropperjs`，项目地址：https://github.com/fengyuanchen/cropperjs"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<div class="cropper-img-warp">
|
||||
<div class="mb15 mt15">
|
||||
<img class="cropper-img" :src="state.cropperImg" />
|
||||
</div>
|
||||
<el-button type="primary" size="default" @click="onCropperDialogOpen">
|
||||
<el-icon>
|
||||
<ele-Crop />
|
||||
</el-icon>
|
||||
更换头像
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<CropperDialog ref="cropperDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="funCropper">
|
||||
import { defineAsyncComponent, ref, reactive } from 'vue';
|
||||
|
||||
// 引入组件
|
||||
const CropperDialog = defineAsyncComponent(() => import('/@/components/cropper/index.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const cropperDialogRef = ref();
|
||||
const state = reactive({
|
||||
cropperImg: 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
|
||||
});
|
||||
|
||||
// 打开裁剪弹窗
|
||||
const onCropperDialogOpen = () => {
|
||||
cropperDialogRef.value.openDialog(state.cropperImg);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.croppers-container {
|
||||
.cropper-img-warp {
|
||||
text-align: center;
|
||||
.cropper-img {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<div ref="echartsMapRef" style="height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="funEchartsMap">
|
||||
import { reactive, onMounted, ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts/extension/bmap/bmap';
|
||||
import { echartsMapList, echartsMapData } from './mock';
|
||||
|
||||
// 定义变量内容
|
||||
const echartsMapRef = ref<RefType>('');
|
||||
const state = reactive({
|
||||
echartsMap: '' as unknown,
|
||||
echartsMapList,
|
||||
echartsMapData,
|
||||
});
|
||||
|
||||
// echartsMap 将坐标信息和对应物理量的值合在一起
|
||||
const convertData = (data: EmptyObjectType[]) => {
|
||||
let res = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let geoCoord = state.echartsMapData[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
// 初始化 echartsMap
|
||||
const initEchartsMap = () => {
|
||||
const myChart = echarts.init(echartsMapRef.value);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
color: ['#9a60b4', '#ea7ccc'],
|
||||
bmap: {
|
||||
center: [104.114129, 37.550339],
|
||||
zoom: 5,
|
||||
roam: true,
|
||||
mapStyle: {},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'pm2.5',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: convertData(state.echartsMapList),
|
||||
symbolSize: function (val: any) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
encode: {
|
||||
value: 2,
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: convertData(
|
||||
state.echartsMapList
|
||||
.sort(function (a: any, b: any) {
|
||||
return b.value - a.value;
|
||||
})
|
||||
.slice(0, 6)
|
||||
),
|
||||
symbolSize: function (val: any) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
encode: {
|
||||
value: 2,
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke',
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#333',
|
||||
},
|
||||
zlevel: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initEchartsMap();
|
||||
});
|
||||
</script>
|
||||
@ -1,387 +0,0 @@
|
||||
// 地图模拟数据
|
||||
export const echartsMapList = [
|
||||
{ name: '海门', value: 9 },
|
||||
{ name: '鄂尔多斯', value: 12 },
|
||||
{ name: '招远', value: 12 },
|
||||
{ name: '舟山', value: 12 },
|
||||
{ name: '齐齐哈尔', value: 14 },
|
||||
{ name: '盐城', value: 15 },
|
||||
{ name: '赤峰', value: 16 },
|
||||
{ name: '青岛', value: 18 },
|
||||
{ name: '乳山', value: 18 },
|
||||
{ name: '金昌', value: 19 },
|
||||
{ name: '泉州', value: 21 },
|
||||
{ name: '莱西', value: 21 },
|
||||
{ name: '日照', value: 21 },
|
||||
{ name: '胶南', value: 22 },
|
||||
{ name: '南通', value: 23 },
|
||||
{ name: '拉萨', value: 24 },
|
||||
{ name: '云浮', value: 24 },
|
||||
{ name: '梅州', value: 25 },
|
||||
{ name: '文登', value: 25 },
|
||||
{ name: '上海', value: 25 },
|
||||
{ name: '攀枝花', value: 25 },
|
||||
{ name: '威海', value: 25 },
|
||||
{ name: '承德', value: 25 },
|
||||
{ name: '厦门', value: 26 },
|
||||
{ name: '汕尾', value: 26 },
|
||||
{ name: '潮州', value: 26 },
|
||||
{ name: '丹东', value: 27 },
|
||||
{ name: '太仓', value: 27 },
|
||||
{ name: '曲靖', value: 27 },
|
||||
{ name: '烟台', value: 28 },
|
||||
{ name: '福州', value: 29 },
|
||||
{ name: '瓦房店', value: 30 },
|
||||
{ name: '即墨', value: 30 },
|
||||
{ name: '抚顺', value: 31 },
|
||||
{ name: '玉溪', value: 31 },
|
||||
{ name: '张家口', value: 31 },
|
||||
{ name: '阳泉', value: 31 },
|
||||
{ name: '莱州', value: 32 },
|
||||
{ name: '湖州', value: 32 },
|
||||
{ name: '汕头', value: 32 },
|
||||
{ name: '昆山', value: 33 },
|
||||
{ name: '宁波', value: 33 },
|
||||
{ name: '湛江', value: 33 },
|
||||
{ name: '揭阳', value: 34 },
|
||||
{ name: '荣成', value: 34 },
|
||||
{ name: '连云港', value: 35 },
|
||||
{ name: '葫芦岛', value: 35 },
|
||||
{ name: '常熟', value: 36 },
|
||||
{ name: '东莞', value: 36 },
|
||||
{ name: '河源', value: 36 },
|
||||
{ name: '淮安', value: 36 },
|
||||
{ name: '泰州', value: 36 },
|
||||
{ name: '南宁', value: 37 },
|
||||
{ name: '营口', value: 37 },
|
||||
{ name: '惠州', value: 37 },
|
||||
{ name: '江阴', value: 37 },
|
||||
{ name: '蓬莱', value: 37 },
|
||||
{ name: '韶关', value: 38 },
|
||||
{ name: '嘉峪关', value: 38 },
|
||||
{ name: '广州', value: 38 },
|
||||
{ name: '延安', value: 38 },
|
||||
{ name: '太原', value: 39 },
|
||||
{ name: '清远', value: 39 },
|
||||
{ name: '中山', value: 39 },
|
||||
{ name: '昆明', value: 39 },
|
||||
{ name: '寿光', value: 40 },
|
||||
{ name: '盘锦', value: 40 },
|
||||
{ name: '长治', value: 41 },
|
||||
{ name: '深圳', value: 360 },
|
||||
{ name: '珠海', value: 42 },
|
||||
{ name: '宿迁', value: 43 },
|
||||
{ name: '咸阳', value: 43 },
|
||||
{ name: '铜川', value: 44 },
|
||||
{ name: '平度', value: 44 },
|
||||
{ name: '佛山', value: 44 },
|
||||
{ name: '海口', value: 44 },
|
||||
{ name: '江门', value: 45 },
|
||||
{ name: '章丘', value: 45 },
|
||||
{ name: '肇庆', value: 46 },
|
||||
{ name: '大连', value: 47 },
|
||||
{ name: '临汾', value: 47 },
|
||||
{ name: '吴江', value: 47 },
|
||||
{ name: '石嘴山', value: 49 },
|
||||
{ name: '沈阳', value: 50 },
|
||||
{ name: '苏州', value: 50 },
|
||||
{ name: '茂名', value: 50 },
|
||||
{ name: '嘉兴', value: 51 },
|
||||
{ name: '长春', value: 51 },
|
||||
{ name: '胶州', value: 52 },
|
||||
{ name: '银川', value: 52 },
|
||||
{ name: '张家港', value: 52 },
|
||||
{ name: '三门峡', value: 53 },
|
||||
{ name: '锦州', value: 54 },
|
||||
{ name: '南昌', value: 54 },
|
||||
{ name: '柳州', value: 54 },
|
||||
{ name: '三亚', value: 54 },
|
||||
{ name: '自贡', value: 56 },
|
||||
{ name: '吉林', value: 56 },
|
||||
{ name: '阳江', value: 57 },
|
||||
{ name: '泸州', value: 57 },
|
||||
{ name: '西宁', value: 57 },
|
||||
{ name: '宜宾', value: 58 },
|
||||
{ name: '呼和浩特', value: 58 },
|
||||
{ name: '成都', value: 58 },
|
||||
{ name: '大同', value: 58 },
|
||||
{ name: '镇江', value: 59 },
|
||||
{ name: '桂林', value: 59 },
|
||||
{ name: '张家界', value: 59 },
|
||||
{ name: '宜兴', value: 59 },
|
||||
{ name: '北海', value: 60 },
|
||||
{ name: '西安', value: 61 },
|
||||
{ name: '金坛', value: 62 },
|
||||
{ name: '东营', value: 62 },
|
||||
{ name: '牡丹江', value: 63 },
|
||||
{ name: '遵义', value: 63 },
|
||||
{ name: '绍兴', value: 63 },
|
||||
{ name: '扬州', value: 64 },
|
||||
{ name: '常州', value: 64 },
|
||||
{ name: '潍坊', value: 65 },
|
||||
{ name: '重庆', value: 66 },
|
||||
{ name: '台州', value: 67 },
|
||||
{ name: '南京', value: 67 },
|
||||
{ name: '滨州', value: 70 },
|
||||
{ name: '贵阳', value: 71 },
|
||||
{ name: '无锡', value: 71 },
|
||||
{ name: '本溪', value: 71 },
|
||||
{ name: '克拉玛依', value: 72 },
|
||||
{ name: '渭南', value: 72 },
|
||||
{ name: '马鞍山', value: 72 },
|
||||
{ name: '宝鸡', value: 72 },
|
||||
{ name: '焦作', value: 75 },
|
||||
{ name: '句容', value: 75 },
|
||||
{ name: '北京', value: 79 },
|
||||
{ name: '徐州', value: 79 },
|
||||
{ name: '衡水', value: 80 },
|
||||
{ name: '包头', value: 80 },
|
||||
{ name: '绵阳', value: 80 },
|
||||
{ name: '乌鲁木齐', value: 84 },
|
||||
{ name: '枣庄', value: 84 },
|
||||
{ name: '杭州', value: 84 },
|
||||
{ name: '淄博', value: 85 },
|
||||
{ name: '鞍山', value: 86 },
|
||||
{ name: '溧阳', value: 86 },
|
||||
{ name: '库尔勒', value: 86 },
|
||||
{ name: '安阳', value: 90 },
|
||||
{ name: '开封', value: 90 },
|
||||
{ name: '济南', value: 92 },
|
||||
{ name: '德阳', value: 93 },
|
||||
{ name: '温州', value: 95 },
|
||||
{ name: '九江', value: 96 },
|
||||
{ name: '邯郸', value: 98 },
|
||||
{ name: '临安', value: 99 },
|
||||
{ name: '兰州', value: 99 },
|
||||
{ name: '沧州', value: 100 },
|
||||
{ name: '临沂', value: 103 },
|
||||
{ name: '南充', value: 104 },
|
||||
{ name: '天津', value: 105 },
|
||||
{ name: '富阳', value: 106 },
|
||||
{ name: '泰安', value: 112 },
|
||||
{ name: '诸暨', value: 112 },
|
||||
{ name: '郑州', value: 113 },
|
||||
{ name: '哈尔滨', value: 114 },
|
||||
{ name: '聊城', value: 116 },
|
||||
{ name: '芜湖', value: 117 },
|
||||
{ name: '唐山', value: 119 },
|
||||
{ name: '平顶山', value: 119 },
|
||||
{ name: '邢台', value: 119 },
|
||||
{ name: '德州', value: 120 },
|
||||
{ name: '济宁', value: 120 },
|
||||
{ name: '荆州', value: 127 },
|
||||
{ name: '宜昌', value: 130 },
|
||||
{ name: '义乌', value: 132 },
|
||||
{ name: '丽水', value: 133 },
|
||||
{ name: '洛阳', value: 134 },
|
||||
{ name: '秦皇岛', value: 136 },
|
||||
{ name: '株洲', value: 143 },
|
||||
{ name: '石家庄', value: 147 },
|
||||
{ name: '莱芜', value: 148 },
|
||||
{ name: '常德', value: 152 },
|
||||
{ name: '保定', value: 153 },
|
||||
{ name: '湘潭', value: 154 },
|
||||
{ name: '金华', value: 157 },
|
||||
{ name: '岳阳', value: 169 },
|
||||
{ name: '长沙', value: 175 },
|
||||
{ name: '衢州', value: 177 },
|
||||
{ name: '廊坊', value: 93 },
|
||||
{ name: '菏泽', value: 194 },
|
||||
{ name: '合肥', value: 229 },
|
||||
{ name: '武汉', value: 273 },
|
||||
{ name: '大庆', value: 279 },
|
||||
];
|
||||
|
||||
// 地图经纬度数据
|
||||
export const echartsMapData = {
|
||||
海门: [121.15, 31.89],
|
||||
鄂尔多斯: [109.781327, 39.608266],
|
||||
招远: [120.38, 37.35],
|
||||
舟山: [122.207216, 29.985295],
|
||||
齐齐哈尔: [123.97, 47.33],
|
||||
盐城: [120.13, 33.38],
|
||||
赤峰: [118.87, 42.28],
|
||||
青岛: [120.33, 36.07],
|
||||
乳山: [121.52, 36.89],
|
||||
金昌: [102.188043, 38.520089],
|
||||
泉州: [118.58, 24.93],
|
||||
莱西: [120.53, 36.86],
|
||||
日照: [119.46, 35.42],
|
||||
胶南: [119.97, 35.88],
|
||||
南通: [121.05, 32.08],
|
||||
拉萨: [91.11, 29.97],
|
||||
云浮: [112.02, 22.93],
|
||||
梅州: [116.1, 24.55],
|
||||
文登: [122.05, 37.2],
|
||||
上海: [121.48, 31.22],
|
||||
攀枝花: [101.718637, 26.582347],
|
||||
威海: [122.1, 37.5],
|
||||
承德: [117.93, 40.97],
|
||||
厦门: [118.1, 24.46],
|
||||
汕尾: [115.375279, 22.786211],
|
||||
潮州: [116.63, 23.68],
|
||||
丹东: [124.37, 40.13],
|
||||
太仓: [121.1, 31.45],
|
||||
曲靖: [103.79, 25.51],
|
||||
烟台: [121.39, 37.52],
|
||||
福州: [119.3, 26.08],
|
||||
瓦房店: [121.979603, 39.627114],
|
||||
即墨: [120.45, 36.38],
|
||||
抚顺: [123.97, 41.97],
|
||||
玉溪: [102.52, 24.35],
|
||||
张家口: [114.87, 40.82],
|
||||
阳泉: [113.57, 37.85],
|
||||
莱州: [119.942327, 37.177017],
|
||||
湖州: [120.1, 30.86],
|
||||
汕头: [116.69, 23.39],
|
||||
昆山: [120.95, 31.39],
|
||||
宁波: [121.56, 29.86],
|
||||
湛江: [110.359377, 21.270708],
|
||||
揭阳: [116.35, 23.55],
|
||||
荣成: [122.41, 37.16],
|
||||
连云港: [119.16, 34.59],
|
||||
葫芦岛: [120.836932, 40.711052],
|
||||
常熟: [120.74, 31.64],
|
||||
东莞: [113.75, 23.04],
|
||||
河源: [114.68, 23.73],
|
||||
淮安: [119.15, 33.5],
|
||||
泰州: [119.9, 32.49],
|
||||
南宁: [108.33, 22.84],
|
||||
营口: [122.18, 40.65],
|
||||
惠州: [114.4, 23.09],
|
||||
江阴: [120.26, 31.91],
|
||||
蓬莱: [120.75, 37.8],
|
||||
韶关: [113.62, 24.84],
|
||||
嘉峪关: [98.289152, 39.77313],
|
||||
广州: [113.23, 23.16],
|
||||
延安: [109.47, 36.6],
|
||||
太原: [112.53, 37.87],
|
||||
清远: [113.01, 23.7],
|
||||
中山: [113.38, 22.52],
|
||||
昆明: [102.73, 25.04],
|
||||
寿光: [118.73, 36.86],
|
||||
盘锦: [122.070714, 41.119997],
|
||||
长治: [113.08, 36.18],
|
||||
深圳: [114.07, 22.62],
|
||||
珠海: [113.52, 22.3],
|
||||
宿迁: [118.3, 33.96],
|
||||
咸阳: [108.72, 34.36],
|
||||
铜川: [109.11, 35.09],
|
||||
平度: [119.97, 36.77],
|
||||
佛山: [113.11, 23.05],
|
||||
海口: [110.35, 20.02],
|
||||
江门: [113.06, 22.61],
|
||||
章丘: [117.53, 36.72],
|
||||
肇庆: [112.44, 23.05],
|
||||
大连: [121.62, 38.92],
|
||||
临汾: [111.5, 36.08],
|
||||
吴江: [120.63, 31.16],
|
||||
石嘴山: [106.39, 39.04],
|
||||
沈阳: [123.38, 41.8],
|
||||
苏州: [120.62, 31.32],
|
||||
茂名: [110.88, 21.68],
|
||||
嘉兴: [120.76, 30.77],
|
||||
长春: [125.35, 43.88],
|
||||
胶州: [120.03336, 36.264622],
|
||||
银川: [106.27, 38.47],
|
||||
张家港: [120.555821, 31.875428],
|
||||
三门峡: [111.19, 34.76],
|
||||
锦州: [121.15, 41.13],
|
||||
南昌: [115.89, 28.68],
|
||||
柳州: [109.4, 24.33],
|
||||
三亚: [109.511909, 18.252847],
|
||||
自贡: [104.778442, 29.33903],
|
||||
吉林: [126.57, 43.87],
|
||||
阳江: [111.95, 21.85],
|
||||
泸州: [105.39, 28.91],
|
||||
西宁: [101.74, 36.56],
|
||||
宜宾: [104.56, 29.77],
|
||||
呼和浩特: [111.65, 40.82],
|
||||
成都: [104.06, 30.67],
|
||||
大同: [113.3, 40.12],
|
||||
镇江: [119.44, 32.2],
|
||||
桂林: [110.28, 25.29],
|
||||
张家界: [110.479191, 29.117096],
|
||||
宜兴: [119.82, 31.36],
|
||||
北海: [109.12, 21.49],
|
||||
西安: [108.95, 34.27],
|
||||
金坛: [119.56, 31.74],
|
||||
东营: [118.49, 37.46],
|
||||
牡丹江: [129.58, 44.6],
|
||||
遵义: [106.9, 27.7],
|
||||
绍兴: [120.58, 30.01],
|
||||
扬州: [119.42, 32.39],
|
||||
常州: [119.95, 31.79],
|
||||
潍坊: [119.1, 36.62],
|
||||
重庆: [106.54, 29.59],
|
||||
台州: [121.420757, 28.656386],
|
||||
南京: [118.78, 32.04],
|
||||
滨州: [118.03, 37.36],
|
||||
贵阳: [106.71, 26.57],
|
||||
无锡: [120.29, 31.59],
|
||||
本溪: [123.73, 41.3],
|
||||
克拉玛依: [84.77, 45.59],
|
||||
渭南: [109.5, 34.52],
|
||||
马鞍山: [118.48, 31.56],
|
||||
宝鸡: [107.15, 34.38],
|
||||
焦作: [113.21, 35.24],
|
||||
句容: [119.16, 31.95],
|
||||
北京: [116.46, 39.92],
|
||||
徐州: [117.2, 34.26],
|
||||
衡水: [115.72, 37.72],
|
||||
包头: [110, 40.58],
|
||||
绵阳: [104.73, 31.48],
|
||||
乌鲁木齐: [87.68, 43.77],
|
||||
枣庄: [117.57, 34.86],
|
||||
杭州: [120.19, 30.26],
|
||||
淄博: [118.05, 36.78],
|
||||
鞍山: [122.85, 41.12],
|
||||
溧阳: [119.48, 31.43],
|
||||
库尔勒: [86.06, 41.68],
|
||||
安阳: [114.35, 36.1],
|
||||
开封: [114.35, 34.79],
|
||||
济南: [117, 36.65],
|
||||
德阳: [104.37, 31.13],
|
||||
温州: [120.65, 28.01],
|
||||
九江: [115.97, 29.71],
|
||||
邯郸: [114.47, 36.6],
|
||||
临安: [119.72, 30.23],
|
||||
兰州: [103.73, 36.03],
|
||||
沧州: [116.83, 38.33],
|
||||
临沂: [118.35, 35.05],
|
||||
南充: [106.110698, 30.837793],
|
||||
天津: [117.2, 39.13],
|
||||
富阳: [119.95, 30.07],
|
||||
泰安: [117.13, 36.18],
|
||||
诸暨: [120.23, 29.71],
|
||||
郑州: [113.65, 34.76],
|
||||
哈尔滨: [126.63, 45.75],
|
||||
聊城: [115.97, 36.45],
|
||||
芜湖: [118.38, 31.33],
|
||||
唐山: [118.02, 39.63],
|
||||
平顶山: [113.29, 33.75],
|
||||
邢台: [114.48, 37.05],
|
||||
德州: [116.29, 37.45],
|
||||
济宁: [116.59, 35.38],
|
||||
荆州: [112.239741, 30.335165],
|
||||
宜昌: [111.3, 30.7],
|
||||
义乌: [120.06, 29.32],
|
||||
丽水: [119.92, 28.45],
|
||||
洛阳: [112.44, 34.7],
|
||||
秦皇岛: [119.57, 39.95],
|
||||
株洲: [113.16, 27.83],
|
||||
石家庄: [114.48, 38.03],
|
||||
莱芜: [117.67, 36.19],
|
||||
常德: [111.69, 29.05],
|
||||
保定: [115.48, 38.85],
|
||||
湘潭: [112.91, 27.87],
|
||||
金华: [119.64, 29.12],
|
||||
岳阳: [113.09, 29.37],
|
||||
长沙: [113, 28.21],
|
||||
衢州: [118.88, 28.97],
|
||||
廊坊: [116.7, 39.53],
|
||||
菏泽: [115.480656, 35.23375],
|
||||
合肥: [117.27, 31.86],
|
||||
武汉: [114.31, 30.52],
|
||||
大庆: [125.03, 46.58],
|
||||
};
|
||||
@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div class="grid-layout-container layout-pd">
|
||||
<el-card shadow="hover" header="vue-grid-layout 拖拽布局演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-grid-layout`，项目地址：https://github.com/jbaysolutions/vue-grid-layout"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<grid-layout
|
||||
v-model:layout="state.layouts"
|
||||
:col-num="12"
|
||||
:row-height="30"
|
||||
:is-draggable="true"
|
||||
:is-resizable="true"
|
||||
:is-mirrored="false"
|
||||
:vertical-compact="true"
|
||||
:margin="[10, 10]"
|
||||
:use-css-transforms="true"
|
||||
>
|
||||
<grid-item v-for="item in state.layouts" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
|
||||
<div class="w100 h100 flex">
|
||||
<span class="flex-margin font14">{{ item.i }}</span>
|
||||
</div>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="funGridLayout">
|
||||
import { reactive } from 'vue';
|
||||
|
||||
// 定义变量内容
|
||||
const state = reactive({
|
||||
layouts: [
|
||||
{ x: 0, y: 0, w: 2, h: 2, i: '0' },
|
||||
{ x: 2, y: 0, w: 2, h: 4, i: '1' },
|
||||
{ x: 4, y: 0, w: 2, h: 5, i: '2' },
|
||||
{ x: 6, y: 0, w: 2, h: 3, i: '3' },
|
||||
{ x: 8, y: 0, w: 2, h: 3, i: '4' },
|
||||
{ x: 10, y: 0, w: 2, h: 3, i: '5' },
|
||||
{ x: 0, y: 5, w: 2, h: 5, i: '6' },
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.grid-layout-container {
|
||||
.vue-grid-item {
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div ref="printRef" class="layout-pd">
|
||||
<el-card shadow="hover" header="打印演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<el-button @click="onPrintJs" size="default" type="primary">
|
||||
<SvgIcon name="iconfont icon-dayin" />
|
||||
点击打印演示
|
||||
</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="funPrintJs">
|
||||
import { ref } from 'vue';
|
||||
import printJs from 'print-js';
|
||||
|
||||
// 定义变量内容
|
||||
const printRef = ref();
|
||||
|
||||
// 打印点击
|
||||
const onPrintJs = () => {
|
||||
printJs({
|
||||
printable: printRef.value,
|
||||
type: 'html',
|
||||
css: ['//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'],
|
||||
scanStyles: false,
|
||||
style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<div class="qrcode-container layout-pd">
|
||||
<el-card shadow="hover" header="qrcodejs2 二维码生成">
|
||||
<el-alert
|
||||
title="感谢优秀的 `qrcodejs2`，项目地址：https://github.com/davidshimjs/qrcodejs"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<div class="qrcode-img-warp">
|
||||
<div class="mb30 mt30 qrcode-img">
|
||||
<div class="qrcode" ref="qrcodeRef"></div>
|
||||
</div>
|
||||
<el-button type="primary" size="default" @click="onInitQrcode">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重新生成
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="funQrcode">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import QRCode from 'qrcodejs2-fixes';
|
||||
|
||||
// 定义变量内容
|
||||
const qrcodeRef = ref();
|
||||
|
||||
// 初始化生成二维码
|
||||
const initQrcode = () => {
|
||||
new QRCode(qrcodeRef.value, {
|
||||
text: `https://lyt-top.gitee.io/vue-next-admin-preview/#/login?t=${new Date().getTime()}`,
|
||||
width: 125,
|
||||
height: 125,
|
||||
colorDark: '#000000',
|
||||
colorLight: '#ffffff',
|
||||
});
|
||||
};
|
||||
// 重新生成
|
||||
const onInitQrcode = () => {
|
||||
qrcodeRef.value.innerHTML = '';
|
||||
initQrcode();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initQrcode();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.qrcode-container {
|
||||
.qrcode-img-warp {
|
||||
text-align: center;
|
||||
.qrcode-img {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 125px;
|
||||
.qrcode {
|
||||
margin: auto;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<div class="splitpanes-container layout-pd">
|
||||
<el-card shadow="hover" header="splitpanes 窗格拆分器">
|
||||
<el-alert
|
||||
title="感谢优秀的 `splitpanes`，项目地址：https://github.com/antoniandre/splitpanes"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<splitpanes class="default-theme" @resize="paneSize = $event[0].size" style="height: 500px">
|
||||
<pane :size="32"> 1 </pane>
|
||||
<pane :size="36">
|
||||
<splitpanes class="default-theme" :horizontal="true">
|
||||
<pane :size="100"> 2 </pane>
|
||||
<pane :size="100"> 3 </pane>
|
||||
</splitpanes>
|
||||
</pane>
|
||||
<pane :size="32"> 4 </pane>
|
||||
</splitpanes>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="funSplitpanes">
|
||||
import { ref } from 'vue';
|
||||
import { Splitpanes, Pane } from 'splitpanes';
|
||||
import 'splitpanes/dist/splitpanes.css';
|
||||
|
||||
// 定义变量内容
|
||||
const paneSize = ref(50);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.splitpanes__pane {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: 70px;
|
||||
color: var(--el-color-primary-light-5);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
background-color: var(--el-color-primary) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<div class="fun-tagsview layout-pd">
|
||||
<NoticeBar
|
||||
text="已删除非当前页 tagsView 演示，后续有时间可以再加回来！，tagsview 支持多标签（参数不同）、单标签共用（参数不同）"
|
||||
background="#ecf5ff"
|
||||
color="#409eff"
|
||||
/>
|
||||
<el-card shadow="hover" header="tagsView 当前页演示" class="mt15">
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default" @click="refreshCurrentTagsView">
|
||||
<el-icon>
|
||||
<ele-RefreshRight />
|
||||
</el-icon>
|
||||
刷新当前页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default" @click="closeCurrentTagsView">
|
||||
<el-icon>
|
||||
<ele-Close />
|
||||
</el-icon>
|
||||
关闭当前页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="warning" size="default" @click="closeOtherTagsView">
|
||||
<el-icon>
|
||||
<ele-CircleClose />
|
||||
</el-icon>
|
||||
关闭其它
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default" @click="closeAllTagsView">
|
||||
<el-icon>
|
||||
<ele-FolderDelete />
|
||||
</el-icon>
|
||||
全部关闭
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="default" @click="openCurrenFullscreen">
|
||||
<el-icon>
|
||||
<ele-FullScreen />
|
||||
</el-icon>
|
||||
当前页全屏
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="funTagsView">
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import mittBus from '/@/utils/mitt';
|
||||
|
||||
// 引入组件
|
||||
const NoticeBar = defineAsyncComponent(() => import('/@/components/noticeBar/index.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute();
|
||||
|
||||
// 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
|
||||
// 1、刷新当前 tagsView
|
||||
const refreshCurrentTagsView = () => {
|
||||
mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 0, ...route }));
|
||||
};
|
||||
// 2、关闭当前 tagsView
|
||||
const closeCurrentTagsView = () => {
|
||||
mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
|
||||
};
|
||||
// 3、关闭其它 tagsView
|
||||
const closeOtherTagsView = () => {
|
||||
mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 2, ...route }));
|
||||
};
|
||||
// 4、关闭全部 tagsView
|
||||
const closeAllTagsView = () => {
|
||||
mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 3, ...route }));
|
||||
};
|
||||
// 5、开启当前页面全屏
|
||||
const openCurrenFullscreen = () => {
|
||||
mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 4, ...route }));
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.fun-tagsview {
|
||||
.fun-tagsview-from-item {
|
||||
:deep(.el-form-item__content) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div class="editor-container layout-pd">
|
||||
<el-card shadow="hover" header="wangeditor富文本编辑器">
|
||||
<el-alert
|
||||
title="感谢优秀的 `wangeditor`，项目地址：https://github.com/wangeditor-team/wangEditor"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<Editor v-model:get-html="state.editor.htmlVal" v-model:get-text="state.editor.textVal" :disable="state.editor.disable" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="funWangEditor">
|
||||
import { defineAsyncComponent, reactive } from 'vue';
|
||||
|
||||
// 引入组件
|
||||
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const state = reactive({
|
||||
editor: {
|
||||
htmlVal:
|
||||
'<p><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;">胡歌，1982年9月20日出生于上海市徐汇区，中国内地影视男演员、流行乐歌手，</span><a href="https://baike.baidu.com/item/%E6%B0%91%E7%9B%9F/1971441?fromModule=lemma_inlink" target="_blank" style="text-indent: 28px; text-align: start;">民盟</a><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;">盟员</span><span style="color: rgb(51, 102, 204); background-color: rgb(255, 255, 255); font-size: 12px;"><sup> [1]</sup></span><a href="" target="" style="text-indent: 28px; text-align: start;"> </a><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;"> ，毕业于</span><a href="https://baike.baidu.com/item/%E4%B8%8A%E6%B5%B7%E6%88%8F%E5%89%A7%E5%AD%A6%E9%99%A2/1736818?fromModule=lemma_inlink" target="_blank" style="text-indent: 28px; text-align: start;">上海戏剧学院</a><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;">表演系。</span></p>',
|
||||
textVal: '胡歌，1982年9月20日出生于上海市徐汇区，中国内地影视男演员、流行乐歌手，民盟盟员 [1] ，毕业于上海戏剧学院表演系。',
|
||||
disable: false,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div class="layout-pd">
|
||||
<el-alert
|
||||
title="温馨提示：1、此页面无法模拟后端控制路由，因为 `gitee` 上所请求的 `json` 菜单数据线上会出现跨域的情况（json地址：
|
||||
https://gitee.com/lyt-top/vue-next-admin-images/raw/master/menu/adminMenu.json）。2、本地接口请求文件位置：`/src/api/menu/index.ts`。
|
||||
3、拉取代码后本地请求查看后端控制页面路由效果：`/src/store/modules/themeConfig.ts`中开启（isRequestRoutes 为 true，则开启后端控制路由）。
|
||||
4、此页面效果只作为演示使用，若出现不可逆转的bug，请尝试 `F5` 刷新页面。5、默认启用的是 `前端控制路由`。"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
></el-alert>
|
||||
<el-button type="primary" size="default" class="mt15" @click="onGoToFrontEndPage">
|
||||
<el-icon>
|
||||
<ele-Position />
|
||||
</el-icon>
|
||||
立即前往前端控制路由
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="limitsBackEndEndPage">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
// 定义变量内容
|
||||
const router = useRouter();
|
||||
|
||||
// 立即前往前端控制路由
|
||||
const onGoToFrontEndPage = () => {
|
||||
router.push('/limits/frontEnd/page');
|
||||
};
|
||||
</script>
|
||||
@ -1,379 +0,0 @@
|
||||
<template>
|
||||
<div class="layout-pd">
|
||||
<LimitsFrontEndPage style="padding: 0 !important" />
|
||||
<!-- 演示1：组件方式 -->
|
||||
<el-card shadow="hover" header="演示1：组件方式" class="mt15">
|
||||
<el-row class="mb10" style="color: #808080">单个权限验证（:value="xxx"）：</el-row>
|
||||
<div class="flex-warp">
|
||||
<Auth :value="'btn.add'">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default">
|
||||
<el-icon>
|
||||
<ele-DocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auth>
|
||||
<Auth :value="'btn.edit'">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default">
|
||||
<el-icon>
|
||||
<ele-Edit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auth>
|
||||
<Auth :value="'btn.del'">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auth>
|
||||
<Auth :value="'btn.link'">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="default">
|
||||
<el-icon>
|
||||
<ele-Link />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auth>
|
||||
</div>
|
||||
|
||||
<el-row class="mb10 mt10" style="color: #808080">多个权限验证，满足一个则显示（:value="[xxx,xxx]"）：</el-row>
|
||||
<div class="flex-warp">
|
||||
<Auths :value="['btn.addsss', 'btn.edit', 'btn.delsss', 'btn.linksss']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default">
|
||||
<el-icon>
|
||||
<ele-DocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auths>
|
||||
<Auths :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default">
|
||||
<el-icon>
|
||||
<ele-Edit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auths>
|
||||
<Auths :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auths>
|
||||
<Auths :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="default">
|
||||
<el-icon>
|
||||
<ele-Link />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auths>
|
||||
</div>
|
||||
|
||||
<el-row class="mb10 mt10" style="color: #808080">多个权限验证，全部满足则显示（:value="[xxx,xxx]"）：</el-row>
|
||||
<div class="flex-warp">
|
||||
<AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default">
|
||||
<el-icon>
|
||||
<ele-DocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</AuthAll>
|
||||
<AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default">
|
||||
<el-icon>
|
||||
<ele-Edit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</AuthAll>
|
||||
<AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</AuthAll>
|
||||
<AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="default">
|
||||
<el-icon>
|
||||
<ele-Link />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</AuthAll>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 演示2：指令方式 -->
|
||||
<el-card shadow="hover" header="演示2：指令方式（页面初始化时执行）" class="mt15">
|
||||
<el-row class="mb10" style="color: #808080">单个权限验证（v-auth="xxx"）：</el-row>
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item" v-auth="'btn.add'">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default">
|
||||
<el-icon>
|
||||
<ele-DocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth="'btn.edit'">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default">
|
||||
<el-icon>
|
||||
<ele-Edit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth="'btn.del'">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth="'btn.link'">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="default">
|
||||
<el-icon>
|
||||
<ele-Link />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row class="mb10 mt10" style="color: #808080">多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）：</el-row>
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item" v-auths="['btn.addsss', 'btn.edit', 'btn.delsss', 'btn.linksss']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default">
|
||||
<el-icon>
|
||||
<ele-DocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default">
|
||||
<el-icon>
|
||||
<ele-Edit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="default">
|
||||
<el-icon>
|
||||
<ele-Link />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row class="mb10 mt10" style="color: #808080">多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）：</el-row>
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default">
|
||||
<el-icon>
|
||||
<ele-DocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default">
|
||||
<el-icon>
|
||||
<ele-Edit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="default">
|
||||
<el-icon>
|
||||
<ele-Link />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 演示3：函数方式 -->
|
||||
<el-card shadow="hover" header="演示3：函数方式（点击按钮查看有无权限，用于判断）" class="mt15">
|
||||
<el-row class="mb10" style="color: #808080">auth('xxx')、auths(['xxx','xxx'])、authAll(['xxx','xxx'])：</el-row>
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default" @click="onAuthClick">
|
||||
<el-icon>
|
||||
<ele-DocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default" @click="onAuthsClick">
|
||||
<el-icon>
|
||||
<ele-Edit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default" @click="onAuthAllClick">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="limitsFrontEndBtn">
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { auth, auths, authAll } from '/@/utils/authFunction';
|
||||
|
||||
// 引入组件
|
||||
const LimitsFrontEndPage = defineAsyncComponent(() => import('/@/views/limits/frontEnd/page/index.vue'));
|
||||
const Auth = defineAsyncComponent(() => import('/@/components/auth/auth.vue'));
|
||||
const Auths = defineAsyncComponent(() => import('/@/components/auth/auths.vue'));
|
||||
const AuthAll = defineAsyncComponent(() => import('/@/components/auth/authAll.vue'));
|
||||
|
||||
// 单个权限验证
|
||||
const onAuthClick = () => {
|
||||
if (!auth('btn.add')) ElMessage.error('抱歉，您没有权限！');
|
||||
else ElMessage.success('恭喜，您有权限！');
|
||||
};
|
||||
// 多个权限验证，满足一个则为 true
|
||||
const onAuthsClick = () => {
|
||||
if (!auths(['btn.add', 'btn.edit', 'btn.del', 'btn.link'])) ElMessage.error('抱歉，您没有权限！');
|
||||
else ElMessage.success('恭喜，您有权限！');
|
||||
};
|
||||
// 多个权限验证，全部满足则为 true
|
||||
const onAuthAllClick = () => {
|
||||
if (!authAll(['btn.add', 'btn.edit', 'btn.del', 'btn.link'])) ElMessage.error('抱歉，您没有权限！');
|
||||
else ElMessage.success('恭喜，您有权限！');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div class="layout-pd">
|
||||
<el-alert
|
||||
title="温馨提示：此权限页面代码及效果只作为演示使用，若出现不可逆转的bug，请尝试 `F5` 刷新页面。若实际项目中非要实现此用户权限切换功能，
|
||||
请在切换方法 `onRadioChange` 最后面添加刷新代码 `window.location.reload()`。 请注意：按钮权限页面中的演示2（指令模式）、演示3（函数模式）
|
||||
切换用户时无法动态演示，想要动态演示，请按 `F5` 或者添加 `window.location.reload()`。"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
></el-alert>
|
||||
<el-alert
|
||||
:title="`当前用户页面权限：[${userInfos.roles}]，当前用户按钮权限：[${userInfos.authBtnList}]`"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mt15"
|
||||
></el-alert>
|
||||
<el-card shadow="hover" header="切换用户演示，前端控制不同用户显示不同页面、按钮权限" class="mt15">
|
||||
<el-radio-group v-model="userAuth" size="default" @change="onRadioChange">
|
||||
<el-radio-button label="admin"></el-radio-button>
|
||||
<el-radio-button label="common"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="limitsFrontEndPage">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import Cookies from 'js-cookie';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useUserInfo } from '/@/stores/userInfo';
|
||||
import { frontEndsResetRoute, setAddRoute, setFilterMenuAndCacheTagsViewRoutes } from '/@/router/frontEnd';
|
||||
|
||||
// 定义变量内容
|
||||
const storesUserInfo = useUserInfo();
|
||||
const { userInfos } = storeToRefs(storesUserInfo);
|
||||
const userAuth = ref('');
|
||||
|
||||
// 初始化用户权限
|
||||
const initUserAuth = () => {
|
||||
userAuth.value = userInfos.value.roles[0];
|
||||
};
|
||||
// 用户权限改变时
|
||||
const onRadioChange = async () => {
|
||||
// 模拟数据
|
||||
frontEndsResetRoute();
|
||||
Cookies.set('userName', userAuth.value);
|
||||
// 模拟切换不同权限用户
|
||||
await storesUserInfo.setUserInfos();
|
||||
await setAddRoute();
|
||||
setFilterMenuAndCacheTagsViewRoutes();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initUserAuth();
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user