移除无用文件，优化参数
This commit is contained in:
monanxiao
@@ -75,26 +75,7 @@ const routerList = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/config",
|
||||
component: Layout,
|
||||
redirect: "config",
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "服务配置",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/config",
|
||||
name: "config",
|
||||
component: () => import("../views/config/index.vue"),
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "服务配置",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: "/goods",
|
||||
component: Layout,
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div class="content-box" style="height: 100%">
|
||||
<iframe
|
||||
src="http://124.221.156.158:3031/#/ScreenPage"
|
||||
frameborder="0"
|
||||
class="full-iframe"
|
||||
></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.full-iframe {
|
||||
// margin-top: 2.5%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
<template>数据统计</template>
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card col-center" shadow="never">
|
||||
<div class="box-card-title">图片上传 🍱🍱🍱🍱🍱</div>
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
<el-image-viewer v-if="dialogVisible" @close="imageView" style="width: 100px; height: 100px" :url-list="[dialogImageUrl]" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
|
||||
const dialogImageUrl = ref("");
|
||||
const dialogVisible = ref(false);
|
||||
const pictureUpload = ref(null);
|
||||
const fileList = ref([]);
|
||||
const handleRemove = (file) => {
|
||||
console.log(file);
|
||||
};
|
||||
|
||||
const imageView = () => {
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const handlePictureCardPreview = (file) => {
|
||||
console.log(file.url);
|
||||
dialogImageUrl.value = file.url;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.box-card-title {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.el-image-viewer__canvas {
|
||||
img {
|
||||
width: 120px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card col-center" shadow="never">
|
||||
<div class="box-card-title">数字动画 🍝🍝🍝🍝</div>
|
||||
<div class="number-grow-warp">
|
||||
<span ref="numberGrow" :data-time="time" class="number-grow" :data-value="number">0</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/* 需求说明：
|
||||
1.数字不需要千位符，但是为了防止以后要有 所以加了个参数判断，默认是没有的
|
||||
2.数字整数变动
|
||||
3.组件改为行内元素，能更好的兼容页面样式
|
||||
4.第二次数字变动在上次的数字累加
|
||||
5.添加监听器防止页面不更新的情况
|
||||
*/
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
const time = reactive(6000);
|
||||
const thousandSign = ref(false);
|
||||
const number = ref(997052786868686);
|
||||
const oldValue = ref(6868686);
|
||||
const numberGrow = ref(null);
|
||||
const setNumberGrow = (ele) => {
|
||||
let value = number.value - oldValue.value;
|
||||
let step = (value * 10) / (time * 100);
|
||||
let current = 0;
|
||||
let start = oldValue.value;
|
||||
let t = setInterval(function () {
|
||||
start += step;
|
||||
if (start > number.value) {
|
||||
clearInterval(t);
|
||||
|
||||
start = number.value;
|
||||
t = null;
|
||||
}
|
||||
if (current === start) {
|
||||
return;
|
||||
}
|
||||
current = parseInt(start);
|
||||
oldValue.value = current;
|
||||
if (thousandSign.value) {
|
||||
ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
|
||||
} else {
|
||||
ele.innerHTML = current.toString();
|
||||
}
|
||||
}, 10);
|
||||
};
|
||||
|
||||
watch(number.value, (newV, oldV) => {
|
||||
setNumberGrow(numberGrow.value);
|
||||
// gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 });
|
||||
});
|
||||
|
||||
// watch: {
|
||||
// number(n) {
|
||||
// gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 })
|
||||
// }
|
||||
// }
|
||||
onMounted(() => {
|
||||
setNumberGrow(numberGrow.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.box-card-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.number-grow-warp {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<div class="content-box" style="height: 100%">
|
||||
<iframe src="https://cn.bing.com/" frameborder="0" class="full-iframe"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.full-iframe {
|
||||
// margin-top: 2.5%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div class="box-card-title">文件上传 🍱🍱🍱🍱🍱</div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
multiple
|
||||
:show-file-list="true"
|
||||
:limit="excelLimit"
|
||||
:http-request="uploadExcel"
|
||||
:before-upload="beforeExcelUpload"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="excelUploadSuccess"
|
||||
:on-error="excelUploadError"
|
||||
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处<em>或点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElNotification } from 'element-plus'
|
||||
// 最大文件数
|
||||
const excelLimit = ref(1)
|
||||
// 文件上传
|
||||
const uploadExcel = (param) => {}
|
||||
const beforeExcelUpload = (file) => {
|
||||
const isExcel =
|
||||
file.type === 'application/vnd.ms-excel' ||
|
||||
file.type ===
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
const isLt5M = file.size / 1024 / 1024 < 5
|
||||
if (!isExcel)
|
||||
ElNotification({
|
||||
message: '上传文件只能是 xls / xlsx 格式！',
|
||||
type: 'warning',
|
||||
})
|
||||
if (!isLt5M)
|
||||
ElNotification({
|
||||
message: '上传文件大小不能超过 5MB！',
|
||||
type: 'warning',
|
||||
})
|
||||
return isExcel && isLt5M
|
||||
}
|
||||
|
||||
// 文件数超出提示
|
||||
const handleExceed = () => {
|
||||
ElNotification({
|
||||
message: '最多只能上传一个文件！',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
|
||||
// 上传错误提示
|
||||
const excelUploadError = () => {
|
||||
ElNotification({
|
||||
message: '导入数据失败，请您重新上传！',
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
|
||||
// 上传成功提示
|
||||
const excelUploadSuccess = () => {
|
||||
ElNotification({
|
||||
message: '导入数据成功！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.box-card-title {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.upload-demo {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card col-center" shadow="never">
|
||||
<div class="box-card-title">引导页 🍮🍯🍳🍔</div>
|
||||
|
||||
<el-button type="primary" @click.prevent.stop="guide">开启指引</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Driver from "driver.js";
|
||||
import "driver.js/dist/driver.min.css";
|
||||
|
||||
const guide = () => {
|
||||
const driver = new Driver({
|
||||
allowClose: false,
|
||||
doneBtnText: "结束",
|
||||
closeBtnText: "关闭",
|
||||
nextBtnText: "下一步",
|
||||
prevBtnText: "上一步",
|
||||
});
|
||||
driver.defineSteps(steps);
|
||||
driver.start();
|
||||
};
|
||||
|
||||
const steps = [
|
||||
{
|
||||
element: "#collapseIcon",
|
||||
popover: {
|
||||
title: "Collapse Icon",
|
||||
description: "Open && Close sidebar",
|
||||
position: "right",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "#breadcrumb",
|
||||
popover: {
|
||||
title: "Breadcrumb",
|
||||
description: "Indicate the current page location",
|
||||
position: "right",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
element: "#fullscreen",
|
||||
popover: {
|
||||
title: "Full Screen",
|
||||
description: "Full Screen, Exit The Full Screen Page",
|
||||
position: "left",
|
||||
},
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.box-card-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
const setWaterCanvas = (str1, color) => {
|
||||
console.log(color);
|
||||
const id = "1.23452384164.123412415";
|
||||
if (document.getElementById(id) !== null) {
|
||||
document.body.removeChild(document.getElementById(id));
|
||||
}
|
||||
const can = document.createElement("canvas");
|
||||
can.width = 120;
|
||||
can.height = 80;
|
||||
const cans = can.getContext("2d");
|
||||
cans.rotate((-20 * Math.PI) / 180); // 水印旋转角度
|
||||
cans.font = "15px Vedana";
|
||||
cans.fillStyle = color;
|
||||
cans.textAlign = "center";
|
||||
cans.textBaseline = "Middle";
|
||||
cans.fillText(str1, can.width / 2, can.height);
|
||||
const div = document.createElement("div");
|
||||
div.id = id;
|
||||
div.style.pointerEvents = "none";
|
||||
div.style.top = "40px";
|
||||
div.style.left = "0px";
|
||||
div.style.opacity = "0.15";
|
||||
div.style.position = "fixed";
|
||||
div.style.zIndex = "100000";
|
||||
div.style.width = document.documentElement.clientWidth + "px";
|
||||
div.style.height = document.documentElement.clientHeight + "px";
|
||||
div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
|
||||
document.body.appendChild(div);
|
||||
return id;
|
||||
};
|
||||
|
||||
// 创建水印
|
||||
export function setWatermark(str1, color) {
|
||||
let id = setWaterCanvas(str1, color);
|
||||
if (document.getElementById(id) === null) {
|
||||
id = setWaterCanvas(str1, color);
|
||||
}
|
||||
}
|
||||
// 清除水印
|
||||
export function clear() {
|
||||
const id = "1.23452384164.123412415";
|
||||
if (document.getElementById(id) !== null) {
|
||||
document.body.removeChild(document.getElementById(id));
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div class="card-title">markdown编辑器🍬🍬🍬🍭🍭🍭<span @click="gotoUrl">[文档链接]</span></div>
|
||||
<v-md-editor model="text" height="80vh"></v-md-editor>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const text = ref("");
|
||||
const gotoUrl = () => {
|
||||
window.open("https://ckang1229.gitee.io/vue-markdown-editor/zh/#%E4%BB%8B%E7%BB%8D", "_blank");
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.card-title {
|
||||
padding-bottom: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
span {
|
||||
color: #673ab7;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<el-card :shadow="never" class="col-center">
|
||||
<div class="p10">密码强度🍓🍇🍈🍉</div>
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="100px"
|
||||
:model="formLabelAlign"
|
||||
style="width: 460px"
|
||||
>
|
||||
<el-form-item label="请输入密码">
|
||||
<el-input
|
||||
v-model="formLabelAlign.passsword"
|
||||
:prefix-icon="Lock"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码强度">
|
||||
<el-progress
|
||||
v-show="formLabelAlign.passsword"
|
||||
:percentage="percentage"
|
||||
style="width: 460px"
|
||||
:status="status"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
const formLabelAlign = reactive({
|
||||
passsword: '',
|
||||
})
|
||||
|
||||
let percentage = ref(0)
|
||||
let status = ref('exception')
|
||||
|
||||
const checkStrong = (sValue) => {
|
||||
var modes = 0
|
||||
if (sValue.length < 1) return modes
|
||||
if (/\d/.test(sValue)) modes++ //数字
|
||||
if (/[a-z]/.test(sValue)) modes++ //小写
|
||||
if (/[A-Z]/.test(sValue)) modes++ //大写
|
||||
if (/\W/.test(sValue)) modes++ //特殊字符
|
||||
switch (modes) {
|
||||
case 1:
|
||||
return 1
|
||||
break
|
||||
case 2:
|
||||
return 2
|
||||
break
|
||||
case 3:
|
||||
case 4:
|
||||
return sValue.length < 10 ? 3 : 4
|
||||
break
|
||||
}
|
||||
return modes
|
||||
}
|
||||
|
||||
const statusChange = (modes) => {
|
||||
if (modes == 1) {
|
||||
percentage.value = 25
|
||||
status.value = 'exception'
|
||||
} else if (modes == 2) {
|
||||
percentage.value = 50
|
||||
status.value = 'exception'
|
||||
} else if (modes == 3) {
|
||||
percentage.value = 75
|
||||
status.value = 'warning'
|
||||
} else {
|
||||
percentage.value = 100
|
||||
status.value = 'success'
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => formLabelAlign.passsword,
|
||||
(newValue, oldValue) => {
|
||||
let modes = checkStrong(newValue)
|
||||
console.log(modes)
|
||||
statusChange(modes)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
@@ -1,278 +0,0 @@
|
||||
<template>
|
||||
<el-card class="clo-center">
|
||||
<div class="p10">验证组件🍨🍨🍨🍧🍧🍧</div>
|
||||
<el-form label-position="left" inline label-width="100px" :model="formLabelAlign">
|
||||
<el-form-item label="请输入验证码" style="margin-right: 0">
|
||||
<el-input v-model="formLabelAlign.code" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="s-canvas">
|
||||
<canvas @click="upDataCode" ref="canvasRef" :width="contentWidth" :height="contentHeight"></canvas></div
|
||||
></el-form-item>
|
||||
</el-form>
|
||||
<div className="sliderContent">
|
||||
<div className="imgDev" style="width: 500px">
|
||||
<canvas id="canvasImg" width="500" height="auto"></canvas>
|
||||
<canvas className="slider" id="sliderBlock" :width="500" :height="280" :style="{ left: sildLeft + 'px' }"></canvas>
|
||||
<!-- <el-slider class="moveSlider" @change="changeValue1" v-model="value1" /> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="moveSlider" :style="{ background: verifyResult ? '#859baa' : '#f7f8fa', color: verifyResult ? '#fff' : '606266' }">
|
||||
{{ verifyResult ? "解锁成功" : "滑动解锁" }}
|
||||
<div class="slider" @mousedown="sliderMove" ref="slider">
|
||||
<el-icon v-if="verifyResult" class="icon-style" style="color: #859baa"><Select /></el-icon>
|
||||
<el-icon v-else class="icon-style"><DArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { DArrowRight, Select } from "@element-plus/icons-vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
const contentWidth = ref(100);
|
||||
const contentHeight = ref(32);
|
||||
const sliderWidth = ref();
|
||||
const sliderHeight = ref();
|
||||
const sildLeft = ref(0);
|
||||
const value1 = ref(0);
|
||||
const sildY = ref();
|
||||
const sildX = ref();
|
||||
const verifyResult = ref(false);
|
||||
const formLabelAlign = reactive({
|
||||
code: "",
|
||||
});
|
||||
const identifyCodes = ref("ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890");
|
||||
const identifyCode = ref("1234");
|
||||
const canvasRef = ref(null);
|
||||
|
||||
// 生成随机数
|
||||
const randomNum = (min, max) => {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
};
|
||||
|
||||
const randomColor = (min, max) => {
|
||||
var r = randomNum(min, max);
|
||||
var g = randomNum(min, max);
|
||||
var b = randomNum(min, max);
|
||||
return "rgb(" + r + "," + g + "," + b + ")";
|
||||
};
|
||||
|
||||
const drawPic = () => {
|
||||
let ctx = canvasRef.value.getContext("2d");
|
||||
ctx.fillStyle = randomColor(180, 230); //填充颜色
|
||||
ctx.fillRect(0, 0, contentWidth.value, contentHeight.value); //填充位置
|
||||
// drawLine(ctx);
|
||||
|
||||
let imgCode = "";
|
||||
// 随机产生字符串，并且随机旋转
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const text = identifyCodes.value[randomNum(0, identifyCodes.value.length)];
|
||||
const deg = randomNum(-30, 30);
|
||||
imgCode += text;
|
||||
ctx.font = randomNum(18, 40) + "px Simhei"; //填充字体
|
||||
ctx.textBaseline = "top";
|
||||
ctx.fillStyle = randomColor(80, 150);
|
||||
drawDot(ctx);
|
||||
ctx.save(); //保存
|
||||
ctx.translate(30 * i + 15, 15);
|
||||
ctx.rotate((deg * Math.PI) / 180); //随机的旋转
|
||||
ctx.fillText(text, -15 + 5, -15); //
|
||||
ctx.restore(); //清除
|
||||
}
|
||||
drawLine(ctx);
|
||||
return imgCode;
|
||||
};
|
||||
|
||||
const drawLine = (ctx) => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
ctx.strokeStyle = randomColor(0, 255);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(randomNum(0, contentWidth.value), randomNum(0, contentHeight.value));
|
||||
ctx.lineTo(randomNum(0, contentWidth.value), randomNum(0, contentHeight.value));
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
const drawDot = (ctx) => {
|
||||
for (let i = 0; i < 20; i++) {
|
||||
ctx.fillStyle = randomColor(0, 255);
|
||||
ctx.beginPath();
|
||||
ctx.arc(randomNum(0, contentWidth.value), randomNum(0, contentHeight.value), 1, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
drawPic();
|
||||
loadImage();
|
||||
});
|
||||
|
||||
const upDataCode = () => {
|
||||
identifyCode.value = "";
|
||||
makeCode(identifyCodes.value, 4);
|
||||
};
|
||||
const makeCode = (val, l) => {
|
||||
for (let i = 1; i < val.length && i <= l; i++) {
|
||||
identifyCode.value += identifyCodes.value[Math.floor(Math.random() * (identifyCodes.value.length - 0) + 0)];
|
||||
}
|
||||
console.log(identifyCode.value);
|
||||
drawPic();
|
||||
};
|
||||
|
||||
// 拼图
|
||||
const loadImage = () => {
|
||||
//加载图片
|
||||
let mainDom = document.getElementById("canvasImg");
|
||||
let bg = mainDom.getContext("2d");
|
||||
let imgSrc =
|
||||
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202001%2F30%2F20200130003214_3GJWF.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663755123&t=0f35d18b29de642d5af549a5ec7062e5";
|
||||
let img = document.createElement("img");
|
||||
img.src = imgSrc;
|
||||
img.onload = () => {
|
||||
mainDom.height = (img.height / img.width) * mainDom.width;
|
||||
bg.drawImage(img, 0, 0, mainDom.width, mainDom.height);
|
||||
let r = 10; //半圆的半径
|
||||
let w = 60; //滑块的宽度
|
||||
let x = randomNum(85, mainDom.width - w - r - 2); //保证缺口完全展示，不会隐藏
|
||||
let y = randomNum(16, mainDom.height - w - r - 2);
|
||||
sildY.value = y;
|
||||
sildX.value = x;
|
||||
bg.lineWidth = 1;
|
||||
bg.strokeStyle = "white";
|
||||
bg.beginPath();
|
||||
bg.moveTo(x, y);
|
||||
//top
|
||||
bg.arc(x + w / 2, y, r, -Math.PI, 0, true);
|
||||
bg.lineTo(x + w, y);
|
||||
//right
|
||||
bg.arc(x + w, y + w / 2, r, 1.5 * Math.PI, 0.5 * Math.PI, false);
|
||||
bg.lineTo(x + w, y + w);
|
||||
//bottom
|
||||
bg.arc(x + w / 2, y + w, r, 0, Math.PI, false);
|
||||
bg.lineTo(x, y + w);
|
||||
//left
|
||||
bg.arc(x, y + w / 2, r, 0.5 * Math.PI, 1.5 * Math.PI, true);
|
||||
bg.lineTo(x, y);
|
||||
bg.stroke();
|
||||
bg.fillStyle = "rgba(0, 0, 0, 0.4)"; //设置背景颜色
|
||||
bg.fill();
|
||||
sliderContent(img);
|
||||
};
|
||||
};
|
||||
|
||||
const sliderContent = (img) => {
|
||||
let r = 10; //半圆的半径
|
||||
let w = 60; //滑块的宽度
|
||||
let mainDom = document.getElementById("sliderBlock");
|
||||
let ctx = mainDom.getContext("2d");
|
||||
//index.store.ts
|
||||
let x = sildLeft.value;
|
||||
let y = sildY.value;
|
||||
let PI = Math.PI;
|
||||
ctx.lineWidth = 1;
|
||||
//绘制
|
||||
ctx.beginPath();
|
||||
//left
|
||||
ctx.moveTo(x, y);
|
||||
//top
|
||||
ctx.arc(x + w / 2, y, r, -PI, 0, true);
|
||||
ctx.lineTo(x + w, y);
|
||||
//right
|
||||
ctx.arc(x + w, y + w / 2, r, 1.5 * PI, 0.5 * PI, false);
|
||||
ctx.lineTo(x + w, y + w);
|
||||
//bottom
|
||||
ctx.arc(x + w / 2, y + w, r, 0, PI, false);
|
||||
ctx.lineTo(x, y + w);
|
||||
//left
|
||||
ctx.arc(x, y + w / 2, r, 0.5 * PI, 1.5 * PI, true);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.shadowBlur = 10;
|
||||
ctx.shadowColor = "black";
|
||||
ctx.stroke();
|
||||
ctx.clip();
|
||||
console.log(img);
|
||||
ctx.drawImage(img, -sildX.value + sildLeft.value, 0, 500, 280);
|
||||
// console.log(ctx)
|
||||
};
|
||||
|
||||
const sliderMove = (event) => {
|
||||
let disX = 0;
|
||||
const iconWidth = 60;
|
||||
const ele = document.querySelector(".moveSlider .slider");
|
||||
const startX = event.clientX || event.touches[0].pageX;
|
||||
const MaxX = 500 - iconWidth;
|
||||
if (verifyResult.value) {
|
||||
return false;
|
||||
}
|
||||
// 开始移动
|
||||
const onMove = (e) => {
|
||||
const endX = e.clientX || e.touches[0].pageX;
|
||||
disX = endX - startX;
|
||||
if (disX <= 0) {
|
||||
disX = 0;
|
||||
}
|
||||
if (disX >= MaxX - iconWidth) {
|
||||
disX = MaxX;
|
||||
}
|
||||
sildLeft.value = disX;
|
||||
ele.style.transition = ".1s all";
|
||||
ele.style.transform = `translateX(${disX}px)`;
|
||||
console.log(ele.style.transform);
|
||||
};
|
||||
|
||||
const onEnd = () => {
|
||||
if (disX > sildX.value - 5 && disX < sildX.value + 5) {
|
||||
verifyResult.value = true;
|
||||
} else {
|
||||
ele.style.transition = ".5s all";
|
||||
ele.style.transform = "translateX(0)";
|
||||
}
|
||||
document.removeEventListener("mousemove", onMove);
|
||||
document.removeEventListener("mouseup", onEnd);
|
||||
};
|
||||
document.addEventListener("mousemove", onMove);
|
||||
document.addEventListener("mouseup", onEnd);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s-canvas {
|
||||
height: 38px;
|
||||
}
|
||||
.s-canvas canvas {
|
||||
margin-top: 1px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.sliderContent {
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
.slider {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.moveSlider {
|
||||
width: 500px;
|
||||
height: 32px;
|
||||
background-color: #f7f8fa;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: #606266;
|
||||
position: relative;
|
||||
border: 1px solid #e4e7ed;
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 32px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
.icon-style {
|
||||
margin-top: 6px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card col-center" shadow="never">
|
||||
<span class="box-card-title">富文本编辑器 🍰🍰🍰🍩🍩🍩</span>
|
||||
<div class="wangeditor-box">
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editorRef"
|
||||
:defaultConfig="toolbarConfig"
|
||||
:mode="mode"
|
||||
/>
|
||||
<Editor
|
||||
class="editor-txt"
|
||||
v-model="valueHtml"
|
||||
:defaultConfig="editorConfig"
|
||||
:mode="mode"
|
||||
@onCreated="handleCreated"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
||||
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||
const editorRef = shallowRef()
|
||||
|
||||
// 内容 HTML
|
||||
const valueHtml = ref('<p>hello</p>')
|
||||
|
||||
// 模拟 ajax 异步获取内容
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
valueHtml.value = '<p>富文本编辑器</p>'
|
||||
}, 1500)
|
||||
})
|
||||
|
||||
const toolbarConfig = {}
|
||||
const editorConfig = { placeholder: '请输入内容...' }
|
||||
|
||||
// 组件销毁时，也及时销毁编辑器
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return
|
||||
editor.destroy()
|
||||
})
|
||||
|
||||
const handleCreated = (editor) => {
|
||||
editorRef.value = editor // 记录 editor 实例，重要！
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.wangeditor-box {
|
||||
border: 1px solid #f0f2f5;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.editor-txt {
|
||||
height: 75vh !important;
|
||||
overflow-y: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-card shadow="never">
|
||||
<div class="p10">水印组件🍬🍬🍬🍭🍭🍭</div>
|
||||
<el-form :inline="true" ref="formRef" :model="numberValidateForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item
|
||||
label="水印名称"
|
||||
prop="text"
|
||||
:rules="[
|
||||
{ required: true, message: 'age is required' },
|
||||
{ type: 'text', message: '请输入水印名称' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="numberValidateForm.text" type="text" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="选择水印颜色" prop="color">
|
||||
<el-color-picker v-model="numberValidateForm.color" show-alpha />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(formRef)">创建</el-button>
|
||||
<el-button @click="resetForm(formRef)">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from "vue";
|
||||
import { setWatermark, clear } from "./index.js";
|
||||
|
||||
const numberValidateForm = reactive({
|
||||
text: "",
|
||||
color: "#4060c7",
|
||||
});
|
||||
const submitForm = () => {
|
||||
console.log(numberValidateForm.color);
|
||||
setWatermark(numberValidateForm.text, numberValidateForm.color);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
numberValidateForm.text = "";
|
||||
numberValidateForm.color = "";
|
||||
clear();
|
||||
};
|
||||
</script>
|
||||
@@ -1,259 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="item in options"
|
||||
:key="item.type"
|
||||
:prop="item.props"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
:align="item.align"
|
||||
show-overflow-tooltip
|
||||
:fixed="item.fixed"
|
||||
>
|
||||
<template v-slot:default="scope" v-if="item.props === 'actions'">
|
||||
<el-icon class="icon-view" @click="ItemView(scope.row)"
|
||||
><View
|
||||
/></el-icon>
|
||||
<el-icon class="icon-edit" @click="editorClick(scope.row)"
|
||||
><Edit
|
||||
/></el-icon>
|
||||
<el-popconfirm
|
||||
confirm-button-text="确认"
|
||||
cancel-button-text="取消"
|
||||
:icon="InfoFilled"
|
||||
icon-color="#626AEF"
|
||||
title="确定要除该服务项目?"
|
||||
@confirm="DeleteItem(index)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-icon class="icon-dele"><Delete /></el-icon>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
:page-size="queryData.size"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
class="mt-4"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="`${dialogData.title}服务配置`"
|
||||
:width="dialogWidth"
|
||||
:hide-required-asterisk="dialogData.isView"
|
||||
draggable
|
||||
>
|
||||
<el-form
|
||||
:model="dialogData.FormData"
|
||||
:rules="rules"
|
||||
ref="FormRef"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item
|
||||
label="配置项目"
|
||||
:label-width="formLabelWidth"
|
||||
prop="title"
|
||||
>
|
||||
<el-input v-model="dialogData.FormData.title" autocomplete="off" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="配置内容" :label-width="formLabelWidth" prop="content">
|
||||
<el-input v-model="dialogData.FormData.content" autocomplete="off" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit()">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
Search,
|
||||
Edit,
|
||||
Delete,
|
||||
UserFilled,
|
||||
InfoFilled,
|
||||
View,
|
||||
} from '@element-plus/icons-vue'
|
||||
import {
|
||||
getConfigList,
|
||||
updateConfig,
|
||||
} from '../../api/modules/config.js'
|
||||
import { options } from './options.js'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getDateTime } from '../../utils'
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
const FormRef = ref()
|
||||
const formLabelWidth = '140px'
|
||||
const dialogData = reactive({
|
||||
isView: true,
|
||||
title: '添加',
|
||||
FormData: {
|
||||
title: '',
|
||||
content: '',
|
||||
},
|
||||
})
|
||||
|
||||
const dialogWidth = ref('0')
|
||||
const rules = reactive({
|
||||
content: [{ required: true, message: '请填写配置内容', trigger: 'change' }],
|
||||
})
|
||||
const oldTableData = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
|
||||
const initData = () => {
|
||||
getConfigList(queryData.value).then((res) => {
|
||||
total.value = res.total
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
const dialogVisibleShow = () => {
|
||||
dialogData.FormData = {
|
||||
title: '',
|
||||
content: '',
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const onSubmit = () => {
|
||||
FormRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
try {
|
||||
if (dialogData.FormData.id) {
|
||||
updateConfig(dialogData.FormData).then((res) => {
|
||||
console.log('编辑数据成功')
|
||||
console.log(ElMessage)
|
||||
ElMessage({
|
||||
message: '编辑服务项目成功',
|
||||
type: 'success',
|
||||
})
|
||||
// tableData.value = res.data
|
||||
})
|
||||
} else {
|
||||
dialogData.FormData.date = getDateTime('')
|
||||
addGoods(dialogData.FormData)
|
||||
.then((res) => {
|
||||
ElMessage({
|
||||
message: '添加服务项目成功',
|
||||
type: 'success',
|
||||
})
|
||||
dialogData.FormData.id = res.data.data.id
|
||||
tableData.value.unshift(dialogData.FormData)
|
||||
})
|
||||
.catch((err) => {})
|
||||
}
|
||||
dialogVisible.value = false
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const editorClick = (item) => {
|
||||
dialogVisible.value = true
|
||||
|
||||
dialogData.FormData = item
|
||||
console.log(dialogData.FormData)
|
||||
dialogData.isView = false
|
||||
dialogData.title = '编辑'
|
||||
}
|
||||
|
||||
const ItemView = (item) => {
|
||||
dialogVisible.value = true
|
||||
dialogData.FormData = item
|
||||
dialogData.isView = false
|
||||
dialogData.title = ''
|
||||
}
|
||||
|
||||
const DeleteItem = (index) => {
|
||||
console.log(index)
|
||||
tableData.value.splice(index, 1)
|
||||
}
|
||||
const cancelEvent = () => {
|
||||
console.log('cancel!')
|
||||
}
|
||||
const setDialogWidth = () => {
|
||||
console.log(document.body.clientWidth)
|
||||
var val = document.body.clientWidth
|
||||
const def = 800 // 默认宽度
|
||||
if (val < def) {
|
||||
dialogWidth.value = '100%'
|
||||
} else {
|
||||
dialogWidth.value = def + 'px'
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
setDialogWidth()
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
setDialogWidth()
|
||||
})()
|
||||
}
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.henader-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.icon-view {
|
||||
font-size: 20px;
|
||||
color: #673ab7;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-edit {
|
||||
font-size: 20px;
|
||||
color: #2f60c2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-dele {
|
||||
font-size: 20px;
|
||||
color: #ff5722;
|
||||
}
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-button--text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.el-select {
|
||||
width: 300px;
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
}
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +0,0 @@
|
||||
export const options = [
|
||||
{
|
||||
label: '配置项目',
|
||||
props: 'title',
|
||||
width: 'auto',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '配置内容',
|
||||
props: 'content',
|
||||
width: 'auto',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
props: 'actions',
|
||||
width: '150',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
}
|
||||
]
|
||||
@@ -1,29 +0,0 @@
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
/* margin-right: 20px; */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.material-header {
|
||||
|
||||
padding: 10px;
|
||||
color: #666;
|
||||
border-bottom: 2px solid #f0f2f5;
|
||||
|
||||
.tit {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.material-content {
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<el-row style="height: 90vh">
|
||||
<el-col :span="6" style="border-right: 10px solid #f0f2f5">
|
||||
<div class="material-header flx-row">
|
||||
<div class="tit">目录</div>
|
||||
<div>
|
||||
<el-icon><MoreFilled /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="material-header flx-row">
|
||||
<div class="tit">我的文件</div>
|
||||
<div>
|
||||
<el-icon><MoreFilled /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="material-content">
|
||||
<div class="flx-row">
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user