|
@@ -1,149 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="qpage">
|
|
|
- <!-- 这里的@后面的就是传递给子组件的自定义方法名-->
|
|
|
- <!-- vue3组件不需要注册-->
|
|
|
- <WellInfoEdit ref="wellEdit" :title="formItem.title" :info="formItem.info" :author="formItem.author" :num="formItem.num" @nums="addnum">
|
|
|
- <!-- v-bind ( : ) ,父组件将值绑定到子组件上 -->
|
|
|
- </WellInfoEdit>
|
|
|
- <el-form :inline="true" :model="queryForm" class="query-form-inline">
|
|
|
- <el-form-item label="姓名">
|
|
|
- <el-input v-model="queryForm.user" placeholder="请输入用户名查询" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="其他">
|
|
|
- <el-input v-model="queryForm.other" placeholder="请输入其他查询" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" :loading="isQuerying" @click="queryHandle">检索</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <canvas ref='canvas' height="420" width="600"></canvas>
|
|
|
- </div>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
- import {reactive,ref,toRefs,toRef,onMounted} from 'vue'
|
|
|
- //import { fetchData } from "../../api/well.js"
|
|
|
- import { fetchData } from "@/api/well.js"
|
|
|
- import WellInfoEdit from "./WellInfoEdit.vue"
|
|
|
-
|
|
|
-// const canvas = ref();
|
|
|
-// onMounted(() => {
|
|
|
-// const ctx = canvas.value.getContext('2d');
|
|
|
-// ctx.moveTo(100, 100);
|
|
|
-// ctx.lineTo(100, 400);
|
|
|
-// ctx.stroke();
|
|
|
-// })
|
|
|
-const canvas = ref();
|
|
|
-let ctx = ref();
|
|
|
-
|
|
|
-const drawLine = () => {
|
|
|
- ctx.beginPath();
|
|
|
- //ctx.moveTo(100, 100);//把路径移动到画布中的指定点,不创建线条
|
|
|
- ctx.lineTo(100, 200);//添加一个新点,然后在画布中创建从该点到最后指定点的线条
|
|
|
- ctx.strokeStyle = 'green';
|
|
|
- //ctx.strokeRect(10,10,120,80);//在x轴为10,y轴为10的位置画长为120,宽为80的长方形
|
|
|
- ctx.stroke();//绘制已定义的路径
|
|
|
-}
|
|
|
-const drawCurvedLine = () => {
|
|
|
- ctx.moveTo(100, 100);
|
|
|
- ctx.lineTo(400, 100);
|
|
|
- ctx.lineTo(100, 400);
|
|
|
- ctx.lineTo(400, 400);
|
|
|
- //ctx.lineCap = 'round';//设置或返回线条的结束端点样式
|
|
|
- // ctx.lineJoin = 'round';//设置或返回两条线相交时,所创建的拐角类型
|
|
|
- ctx.stroke();
|
|
|
-}
|
|
|
-const drawStrokeRect = () => {
|
|
|
- ctx.rect(100, 100, 100, 100);//创建矩形
|
|
|
- ctx.strokeStyle = 'green';//设置或返回用于笔触的颜色、渐变或模式
|
|
|
- ctx.stroke();
|
|
|
-}
|
|
|
-const drawFillRect = () => {
|
|
|
- ctx.beginPath();//起始一条路径,或重置当前路径
|
|
|
- ctx.rect(300, 100, 100, 100);
|
|
|
- ctx.fillStyle = 'blue';//设置或返回用于填充绘画的颜色、渐变或模式
|
|
|
- ctx.fill();
|
|
|
-}
|
|
|
-const drawFillYuan = () => {
|
|
|
- ctx.beginPath();
|
|
|
- ctx.arc(100,75,50,0,2*Math.PI);//创建弧/曲线(用于创建圆形或部分圆)
|
|
|
- ctx.stroke();
|
|
|
-}
|
|
|
-const initContext = () => {
|
|
|
- ctx = canvas.value.getContext('2d');
|
|
|
- console.log("canvas.value.width:"+canvas.value.width)
|
|
|
- console.log("canvas.value.height:"+canvas.value.height)
|
|
|
-}
|
|
|
-onMounted(() => {
|
|
|
- initContext();
|
|
|
- //drawLine();
|
|
|
- //drawCurvedLine();
|
|
|
- //drawStrokeRect();
|
|
|
- // drawFillRect();
|
|
|
- drawFillYuan();
|
|
|
-})
|
|
|
- console.log('---setup111---');
|
|
|
- const formItem = reactive({
|
|
|
- title: '文章标题222',
|
|
|
- info: '文章内容',
|
|
|
- author: 'hbjzws',
|
|
|
- num:1
|
|
|
- });
|
|
|
- const addnum=(val)=>{
|
|
|
- formItem.num=val
|
|
|
- }
|
|
|
-
|
|
|
- const people = reactive({ name: "mika", age: "22" });
|
|
|
- console.log('--people.name----'+people.name)
|
|
|
- const {name,age} = toRefs(people)
|
|
|
- console.log('----name.value--'+name.value)
|
|
|
- console.log('----name.value--'+age.value)
|
|
|
- const name2 = toRef(people, "name")
|
|
|
- console.log('----name2.value--'+name2.value)
|
|
|
- let name3="mika3333333333";
|
|
|
- let name4 =ref(name3);
|
|
|
- console.log('----name4.value--'+name4.value)
|
|
|
- let refV= ref(null);
|
|
|
- console.log('----refV--'+refV.value)
|
|
|
- const wellEdit=ref(null)
|
|
|
-
|
|
|
- const isQuerying=ref(false)
|
|
|
- const queryForm = reactive({
|
|
|
- user: '',
|
|
|
- other:''
|
|
|
- })
|
|
|
-
|
|
|
- const queryHandle=()=>{
|
|
|
- console.log('----queryHandle--')
|
|
|
- //子组件暴露的方法和属性,只有在父组件的方法中才生效,否则会报错
|
|
|
- console.log("wellEdit.value.count:"+wellEdit.value.count) // 123456
|
|
|
- wellEdit.value.handleNodeClick()
|
|
|
- isQuerying.value=true
|
|
|
- //alert("111");queryForm.user="121";queryForm.other="333"
|
|
|
- isQuerying.value=false
|
|
|
- fetchData({}).then((res) => {
|
|
|
- console.log('----111--')
|
|
|
- console.log(res)
|
|
|
- if(res.code==0){
|
|
|
- console.log('---当前页号--'+res.data.currPage)
|
|
|
- console.log('---实际数据--'+res.data.data)
|
|
|
-
|
|
|
- }
|
|
|
- //menus.value=res
|
|
|
-
|
|
|
- //store.currentMenu=res[0]
|
|
|
- });
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
- @import url('../../assets/css/qpage.css');
|
|
|
- canvas {
|
|
|
- border: 1px solid;
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|