Skip to content

V
vue3-quasar-ts-study01
Commit 2f37a34b authored by hucy's avatar hucy ☘
Browse files
Options

不重要的提交

parent d66653db
Show whitespace changes
Inline Side-by-side
Showing with 385 additions and 205 deletions
src/modules/page6/IndexPage.vue
View file @ 2f37a34b
......@@ -13,7 +13,10 @@ export default {
// import CarouselWarp from './element/CarouselWarp.vue';
// import DataResponsive from './element/DataResponsive.vue';
// import CanvasStudy from './element/CanvasStudyCopy1.vue';
import CanvasStudy from './element/CanvasCurve.vue';
// import CanvasStudy from './element/CanvasCurve.vue';
// import SubComponents from './element/AsyncAwait.vue';
import SubComponents from './element/equipment/IndexPage.vue';
</script>
<template>
<div class="page6 container-height">
......@@ -22,7 +25,9 @@ import CanvasStudy from './element/CanvasCurve.vue';
<!-- <morph-box /> -->
<!-- <carousel-warp /> -->
<!-- <data-responsive /> -->
<canvas-study />
<!-- <canvas-study /> -->
<sub-components />
</div>
</template>
......
src/modules/page6/config.ts
View file @ 2f37a34b
......@@ -515,3 +515,62 @@ export const AUTHS = [
},
},
];
// 机台列表测试数据1
export const machineList1 = [
{
code: 'Z01',
state: 'run',
color: 'red',
},
{
code: 'Z02',
state: 'run',
color: 'red',
},
{
code: 'Z03',
state: 'run',
color: 'red',
},
{
code: 'Z04',
state: 'run',
color: 'red',
},
{
code: 'Z05',
state: 'run',
color: 'red',
},
{
code: 'Z06',
state: 'run',
color: 'red',
},
{
code: 'Z07',
state: 'run',
color: 'red',
},
{
code: 'Z08',
state: 'run',
color: 'red',
},
{
code: 'Z09',
state: 'run',
color: 'red',
},
{
code: 'Z010',
state: 'run',
color: 'red',
},
{
code: 'Z011',
state: 'run',
color: 'red',
},
];
src/modules/page6/element/AsyncAwait.vue 0 → 100644
View file @ 2f37a34b
<!--
* async await return
-->
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const primeNum = ref(1000000);
const msg = ref('');
const requestMsg = ref('');
onMounted(() => {
fun();
});
function getMag(name: any) {
return `Hello, my name is ${name}.`;
}
function fun() {
const name = '张三';
const msg = getMag(name);
console.log(msg); // Hello, my name is 张三.
}
// 生成素数
function generatePrimes() {
function isPrime(n: any) {
// Math.sqrt() 函数返回一个数的平方根
for (let c = 2; c <= Math.sqrt(n); ++c) {
if (n % c === 0) {
return false;
}
}
return true;
}
let primes: number[] = [];
const maximum = 1000000;
while (primes.length < primeNum.value) {
const candidate = Math.floor(Math.random() * (maximum + 1));
if (isPrime(candidate)) {
primes.push(candidate);
}
}
msg.value = `已生成素数${primes.length}个`;
}
function xhrClick() {
requestMsg.value = '';
const xhr = new XMLHttpRequest();
xhr.addEventListener('loadend', () => {
requestMsg.value = `${requestMsg.value}完成！状态码：${xhr.status}`;
});
xhr.open(
'GET',
'https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json'
);
xhr.send();
requestMsg.value = '请求已发起\n';
}
function heavyLoad() {
document.location.reload();
}
function fetchApi() {
const fetchPromise = fetch(
'https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json'
);
console.log(fetchPromise);
fetchPromise.then((response) => {
console.log(`已收到响应：${response.status}`);
});
console.log('已发送请求……');
}
</script>
<template>
<div class="fit">
<div class="q-mb-md">async await return</div>
<div class="content q-gutter-md">
<q-card class="my-card bg-primary text-white">
<q-card-section>
<div class="q-mb-md q-gutter-sm">
<q-btn
color="white"
text-color="primary"
label="生成素数"
@click="generatePrimes"
/>
</div>
<div>
<q-input
dark
filled
label-color="white"
v-model="primeNum"
label="素数个数"
/>
</div>
<div>{{ msg }}</div>
</q-card-section>
</q-card>
<q-card class="my-card bg-orange-4 text-white">
<q-card-section>
<div class="q-mb-md q-gutter-sm">
<q-btn
color="white"
text-color="orange-4"
label="点击发起请求"
@click="xhrClick"
/>
<q-btn outline text-color="white" label="重载" @click="heavyLoad" />
</div>
<div>{{ requestMsg }}</div>
</q-card-section>
</q-card>
<q-card class="my-card bg-purple-3 text-white">
<q-card-section>
<div class="q-mb-md q-gutter-sm">
<q-btn
no-caps
color="white"
text-color="purple-3"
label="fetch API"
@click="fetchApi"
/>
</div>
</q-card-section>
</q-card>
</div>
</div>
</template>
<style lang="scss" scoped>
.content {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
.my-card {
width: 300px;
}
</style>
src/modules/page6/element/CanvasStudyCopy1.vue deleted 100644 → 0
View file @ d66653db
<!--
* canvas学习-正弦曲线
-->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const transX = ref(-900);
const transY = ref(0);
onMounted(() => {
sineCurve();
});
// 正弦曲线
function sineCurve() {
let canvas: any = document.getElementById('canvas');
let pen = canvas.getContext('2d');
let canvas2: any = document.getElementById('canvas2');
let pen2 = canvas2.getContext('2d');
pen2.save();
pen2.beginPath();
pen2.beginPath();
// drawGrid('green', 1200, 600, pen2);
pen2.restore();
// const width = 600; // canvas宽
// const angle = 30; // 角度值
// const arc = (angle * Math.PI) / 180; // 弧度值
// 中心点坐标
// const center = {
// x: 300,
// y: 300,
// };
// 绘制网格
function drawGrid(color: string, w: number, h: number, pen: any) {
const step = 100;
const w_l = w / step;
const h_l = h / step;
// 横着的线
for (let i = 0; i <= h_l; i++) {
pen.beginPath();
pen.strokeStyle = color;
pen.moveTo(0, i * step);
pen.lineTo(w, i * step);
pen.stroke();
}
// 竖着的线
for (let i = 0; i <= w_l; i++) {
pen.beginPath();
pen.moveTo(i * step, 0);
pen.lineTo(i * step, h);
pen.stroke();
}
}
pen.save();
drawGrid('#ca3e47', 1200, 600, pen);
pen.restore();
// 正弦曲线
// 圆心坐标
const center = {
x: 100,
y: 300,
};
const r = 100; // 半径
pen.save();
pen.beginPath();
pen.arc(center.x, center.y, r, 0, 2 * Math.PI);
pen.strokeStyle = '#ffb549';
pen.stroke();
// 指示线
pen.beginPath();
pen.moveTo(center.x, center.y);
pen.lineTo(2 * r, center.y);
pen.lineWidth = 2;
pen.stroke();
pen.restore();
// 画圆弧
function drawArc(arc: number) {
pen.save();
pen.beginPath();
const a_side1 = Math.sin(arc) * r;
const b_side1 = Math.cos(arc) * r;
const x1 = center.x + b_side1;
const y1 = center.y + a_side1;
pen.restore();
pen.save();
pen.beginPath();
pen.moveTo(x1, y1);
pen.lineTo(300, y1);
pen.strokeStyle = 'blue';
pen.stroke();
pen.restore();
// 正弦点
pen2.beginPath();
pen2.arc(300 - transX.value, y1, 10, 0, 2 * Math.PI);
pen2.stroke();
// 移动
transX.value += 10;
// 能够显示的区域长度
const zoneLenth = 200;
// (0-900)是初始的transX.value
const sideP = 0 - 900 + zoneLenth;
if (transX.value > sideP) {
const lens1 = transX.value - sideP;
// 1200是pen2画布的宽度
const clearX = 1200 - lens1;
// 600是pen2画布的高度
pen2.clearRect(clearX, 0, lens1, 600);
}
return {
x: x1,
y: y1,
};
}
let i = 24;
setInterval(() => {
if (i < 0) {
i = 23;
}
drawArc((i * 15 * Math.PI) / 180);
i--;
if (transX.value > 300) {
transX.value = 0;
pen2.clearRect(0, 0, 1200, 600);
}
}, 1000);
// drawArc((360 * Math.PI) / 180);
// drawArc((345 * Math.PI) / 180);
// drawArc((330 * Math.PI) / 180);
// drawArc((315 * Math.PI) / 180);
// drawArc((300 * Math.PI) / 180);
// drawArc((285 * Math.PI) / 180);
// drawArc((270 * Math.PI) / 180);
// drawArc((255 * Math.PI) / 180);
// drawArc((240 * Math.PI) / 180);
// drawArc((225 * Math.PI) / 180);
// drawArc((210 * Math.PI) / 180);
// drawArc((195 * Math.PI) / 180);
// drawArc((180 * Math.PI) / 180);
// drawArc((165 * Math.PI) / 180);
// drawArc((150 * Math.PI) / 180);
// drawArc((135 * Math.PI) / 180);
// drawArc((120 * Math.PI) / 180);
// drawArc((105 * Math.PI) / 180);
// drawArc((90 * Math.PI) / 180);
// drawArc((75 * Math.PI) / 180);
// drawArc((60 * Math.PI) / 180);
// drawArc((45 * Math.PI) / 180);
// drawArc((30 * Math.PI) / 180);
// drawArc((15 * Math.PI) / 180);
// drawArc((0 * Math.PI) / 180);
// drawArc((345 * Math.PI) / 180);
// drawArc((330 * Math.PI) / 180);
// drawArc((315 * Math.PI) / 180);
// drawArc((300 * Math.PI) / 180);
// drawArc((285 * Math.PI) / 180);
}
</script>
<template>
<div class="fit">
<div>canvas</div>
<div class="relative-position">
<canvas
id="canvas"
width="1200"
height="600"
style="border: 1px solid red; position: absolute; top: 0; left: 0"
></canvas>
<canvas
id="canvas2"
width="1200"
height="600"
:style="{
border: '1px solid green',
position: 'absolute',
top: 0,
left: 0,
transform: `translate(${transX}px, ${transY}px)`,
}"
></canvas>
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
transform: translate(100px, 100px);
}
</style>
src/modules/page6/element/VueTest.vue 0 → 100644
View file @ 2f37a34b
<!--
* 草稿
-->
<script setup lang="ts">
// import { ref } from 'vue';
</script>
<template>
<div></div>
</template>
<style lang="scss" scoped></style>
src/modules/page6/element/equipment/EquipmentPage.vue 0 → 100644
View file @ 2f37a34b
<script setup lang="ts">
import { watch, ref } from 'vue';
interface Props {
list: any[];
autoplay: number;
}
const props = withDefaults(defineProps<Props>(), {
list: () => [],
autoplay: 10000,
});
const slide = ref('1');
watch(
() => props.list,
() => {
listChange();
}
);
function listChange() {
console.log('999', props.list);
}
</script>
<template>
<div class="my-carousel-box">
<div class="content">
<q-carousel
v-model="slide"
transition-prev="slide-right"
transition-next="slide-left"
animated
infinite
class="my-carousel"
>
<q-carousel-slide name="1" class="my-carousel-slide">
<div class="item">
<div class="item-equipment">
<div class="pic"></div>
<div class="item-name">Z01</div>
</div>
</div>
</q-carousel-slide>
<q-carousel-slide name="2" class="my-carousel-slide">
<div class="item">888</div>
</q-carousel-slide>
<q-carousel-slide name="3" class="my-carousel-slide">
<div class="item">999</div>
</q-carousel-slide>
</q-carousel>
</div>
<div class="points">导航</div>
</div>
</template>
<style lang="scss" scoped>
.my-carousel-box {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
}
.content {
flex: 1;
}
.my-carousel {
height: 100% !important;
background-color: transparent;
}
.my-carousel-slide {
padding: 0 !important;
}
.item {
width: 100%;
height: 100%;
overflow: hidden;
// 5列 * 2行
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.item-equipment {
border: 1px solid red;
display: flex;
flex-flow: column nowrap;
.pic {
width: 100%;
background-color: pink;
background-image: url('https://img0.baidu.com/it/u=925843206,3288141497&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666803600&t=81f620f962ec6a70673c05d6a55328b5');
background-size: 100% 100%;
flex: 1;
}
.item-name {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
background-color: yellow;
}
}
</style>
src/modules/page6/element/equipment/IndexPage.vue 0 → 100644
View file @ 2f37a34b
<!--
* 机台列表轮播图
-->
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { machineList1 } from '../../config';
import EquipmentPage from './EquipmentPage.vue';
const state = reactive({
list: [] as any,
autoplay: 10000,
});
onMounted(() => {
state.list = handleMachineList(machineList1);
state.autoplay = 3000;
});
function handleMachineList(data: any) {
const step = 3;
const length = data.length;
const divisionRes = division(length, step);
console.log(divisionRes);
let DATA = JSON.parse(JSON.stringify(data));
let arr = [] as any;
for (let i = 0; i < divisionRes.int; i++) {
return;
}
return DATA;
}
// 取整 取余
function division(n: number, m: number) {
const yu = n % m;
const int = parseInt(String(n / m));
return {
yu,
int,
};
}
</script>
<template>
<div>机台列表</div>
<div class="my-warp-box">
<equipment-page :list="state.list" :autoplay="state.autoplay" />
</div>
</template>
<style lang="scss" scoped>
.my-warp-box {
width: 500px;
height: 300px;
border: 1px solid red;
background-color: yellowgreen;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment