ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主界面，系数校准界面调整

Browse Source
This commit is contained in:
sjl
2025-01-06 09:21:24 +08:00
parent 1be15ee849
commit c4e2da8d67
15 changed files with 302 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/api/device/interface/device.ts
View File

@@ -44,7 +44,6 @@ export namespace Device {
checkState?: number| null; //检测状态
checkResult?: number| null; //检测结果
reportState?: number| null; //报告状态
documentState?: number| null; //归档状态
reportPath?: string| null; //报告路径
qRCode?: string| null; //设备关键信息二维码
reCheckNum: number; //复检次数

6
frontend/src/api/home/channelsTest/index.ts Normal file
View File

@@ -0,0 +1,6 @@
import http from "@/api";
import {ChannelsTest} from "@/api/home/interface/channelsTest";
export const getBigTestItem = () => {
return http.get('');
}

22
frontend/src/api/home/interface/channelsTest.ts Normal file
View File

@@ -0,0 +1,22 @@
// 系数校准模块
export namespace ChannelsTest {
// 系数校准列表
export interface CoefficientVO {
monitorNum: string;//监测点序号
desc: string;//描述
aVuData:string;//电压通道A数据
aVuXi:string;//电压通道A系数
bVuData:string;//电压通道B数据
bVuXi:number;//电压通道B系数
cVuData:number;//电压通道C数据
cVuXi?:string;//电压通道C系数
aIeData?:string;//电流通道A数据
aIeXi?:string;//电流通道A系数
bIeData?:string;//电流通道B数据
bIeXi?:string;//电流通道B系数
cIeData?:string;//电流通道C数据
cIeXi?:string;//电流通道C系数
}
}

4
frontend/src/components/echarts/pie/default.vue
View File

@@ -35,6 +35,7 @@ const init = () => {
isRadius: false, //是否圆角
isSpace: false, //是否显示间隔
isLabelLine: true, //是否显示引导线
titleFontSize: '18px', //标题字体大小
...props.customData,
};
legendData.value = {
@@ -49,6 +50,9 @@ const init = () => {
title: {
text: customData.value.title,
left: customData.value.textAlign,
textStyle: {
fontSize: customData.value.titleFontSize, // 使用 titleFontSize 属性
},
},
legend:legendData.value,
// legend: {

37
frontend/src/views/home/components/channelsTest.vue
View File

@@ -22,33 +22,33 @@
<el-step>
<template #title>
<span>大电压/电流系数下装</span><br/>
<span>源输出为：</span><br/>
<span v-if="active > 0">Ua=Ub=Uc=57.74V</span><br/>
<span v-if="active > 0">Ia=Ib=Ic=10A</span>
<span class="spanStyle">源输出为：</span><br/>
<span class="spanStyle" v-if="active > 0">Ua=Ub=Uc=57.74V</span><br/>
<span class="spanStyle" v-if="active > 0">Ia=Ib=Ic=10A</span>
</template>
</el-step>
<el-step>
<template #title>
<span>小电压/电流系数下装</span><br/>
<span>源输出为：</span><br/>
<span v-if="active > 1">Ua=Ub=Uc=5.774V</span><br/>
<span v-if="active > 1">Ia=Ib=Ic=1A</span>
<span class="spanStyle">源输出为：</span><br/>
<span class="spanStyle" v-if="active > 1">Ua=Ub=Uc=5.774V</span><br/>
<span class="spanStyle" v-if="active > 1">Ia=Ib=Ic=1A</span>
</template>
</el-step>
<el-step>
<template #title>
<span>大电压/电流校准</span><br/>
<span>源输出为：</span><br/>
<span v-if="active > 2">Ua=Ub=Uc=57.74V</span><br/>
<span v-if="active > 2">Ia=Ib=Ic=10A</span>
<span class="spanStyle">源输出为：</span><br/>
<span class="spanStyle" v-if="active > 2">Ua=Ub=Uc=57.74V</span><br/>
<span class="spanStyle" v-if="active > 2">Ia=Ib=Ic=10A</span>
</template>
</el-step>
<el-step>
<template #title>
<span>小电压/电流校准</span><br/>
<span>源输出为：</span><br/>
<span v-if="active > 3">Ua=Ub=Uc=5.774V</span><br/>
<span v-if="active > 3">Ia=Ib=Ic=1A</span>
<span class="spanStyle">源输出为：</span><br/>
<span class="spanStyle" v-if="active > 3">Ua=Ub=Uc=5.774V</span><br/>
<span class="spanStyle" v-if="active > 3">Ia=Ib=Ic=1A</span>
</template>
</el-step>
<el-step title="结束"/>
@@ -146,12 +146,11 @@ const webMsgSend = toRef(props, 'webMsgSend');
watch(webMsgSend,function (newValue,oldValue){
switch (newValue.requestId){
}
})
// 定义 TableDataItem 接口
interface TableDataItem {
id: string;
@@ -169,8 +168,6 @@ interface TableDataItem {
IbChannel?: number | string;
IcData?: number | string;
IcChannel?: number | string;
Result?: string | string;
updateTime?: string;
}
const dataTemplates3 = [
@@ -542,6 +539,7 @@ const activities = [
qualified.value = 0
active.value = 0
dialogVisible.value = false
editableTabsValue.value = '0'
}
const getTableDataForChannel = (index: number): any[] => {
@@ -616,6 +614,7 @@ const checkForErrors = (data: TableDataItem[]): boolean => {
};
const handleSubmit = async () => {
debugger
// 初始化 currentTableData
let isTimer2Completed = false;
// 初始化 loadingStates 为 true
@@ -843,6 +842,10 @@ const initializeTableData = (templates: TableDataItem[], index: number): Ref<Tab
}
.right-content {
flex: 5;
flex: 6;
}
.spanStyle{
font-size: 14px;
}
</style>

57
frontend/src/views/home/components/channelsTestTable.vue
View File

@@ -7,7 +7,6 @@
max-height="400px"
:span-method="objectSpanMethod">
<el-table-column prop="MonitorIdx" label="监测点序号" width="80"/>
<!-- <el-table-column prop="updateTime" label="上送时刻" width="180"/> -->
<el-table-column prop="deviceName" label="描述" width="90"/>
<el-table-column label="电压通道" >
<el-table-column prop="Ua" label="L1">
@@ -21,7 +20,13 @@
</span>
</template>
</el-table-column>
<el-table-column prop="UaChannel" label="系数">
<el-table-column prop="UaChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电压L1系数校准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope">
<el-tag type="danger" v-if="scope.row.UaChannel === '不合格'">
{{ scope.row.UaChannel }}
@@ -32,7 +37,6 @@
<span v-else>
{{ scope.row.UaChannel }}
</span>
<!-- <el-tag type="danger" v-if="scope.row.UaChannel === '不合格'">{{ scope.row.UaChannel }}</el-tag> -->
</template>
</el-table-column>
</el-table-column>
@@ -47,7 +51,13 @@
</span>
</template>
</el-table-column>
<el-table-column prop="UbChannel" label="系数">
<el-table-column prop="UbChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电压L2系数校准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope">
<el-tag type="danger" v-if="scope.row.UbChannel === '不合格'">
{{ scope.row.UbChannel }}
@@ -72,7 +82,13 @@
</span>
</template>
</el-table-column>
<el-table-column prop="UcChannel" label="系数">
<el-table-column prop="UcChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电压L3系数校准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope">
<el-tag type="danger" v-if="scope.row.UcChannel === '不合格'">
{{ scope.row.UcChannel }}
@@ -99,7 +115,13 @@
</span>
</template>
</el-table-column>
<el-table-column prop="IaChannel" label="系数">
<el-table-column prop="IaChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电流L1系数校准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope">
<el-tag type="danger" v-if="scope.row.IaChannel === '不合格'">
{{ scope.row.IaChannel }}
@@ -124,7 +146,13 @@
</span>
</template>
</el-table-column>
<el-table-column prop="IbChannel" label="系数">
<el-table-column prop="IbChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电流L2系数校准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope">
<el-tag type="danger" v-if="scope.row.IbChannel === '不合格'">
{{ scope.row.IbChannel }}
@@ -149,7 +177,13 @@
</span>
</template>
</el-table-column>
<el-table-column prop="IcChannel" label="系数">
<el-table-column prop="IcChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电流L3系数准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope">
<el-tag type="danger" v-if="scope.row.IcChannel === '不合格'">
{{ scope.row.IcChannel }}
@@ -164,13 +198,6 @@
</el-table-column>
</el-table-column>
</el-table-column>
<!-- <el-table-column label="校准结果">
<template #default="scope">
<el-tag type="danger" v-if="scope.row.Result === '不合格'">{{ scope.row.Result }}</el-tag>
<span v-if="scope.row.Result != '不合格'">{{ scope.row.Result }}</span>
</template>
</el-table-column> -->
</el-table>
</div>
</template>

33
frontend/src/views/home/components/table.vue
View File

@@ -18,7 +18,7 @@
<template #tableHeader="">
<el-form :model="form" :inline="true">
<el-form-item label="关键字">
<el-input v-model="form.search" placeholder="请输入设备名称"></el-input>
<el-input v-model="form.search" placeholder="请输入设备名称" clearable></el-input>
</el-form-item>
<el-form-item label="检测状态" v-if="form.activeTabs != 3 && form.activeTabs != 4 && form.activeTabs != 5">
<el-select v-model="form.checkStatus" clearable>
@@ -26,7 +26,6 @@
v-for="(item, index) in checkStatus"
:label="item.label"
:value="item.id"
:key="index"
v-show="shouldShowOption(item)"
></el-option>
@@ -177,10 +176,10 @@
link
:icon="Switch"
@click="openDrawer('误差体系更换', scope.row)"
v-if="form.activeTabs === 5 && scope.row.documentState === 1"
v-if="form.activeTabs === 5"
>误差体系更换</el-button>
<div class='cn-render-buttons' v-if="form.activeTabs === 5 && scope.row.documentState === 1">
<div class='cn-render-buttons' v-if="form.activeTabs === 5 ">
<el-dropdown trigger='click'>
<el-button link type='primary' :icon="Download" class='table-operate'>
<div class='table-operate-text'>报告下载</div>
@@ -290,8 +289,14 @@ const dialogForm = ref<any>({
});
const modeStore = useModeStore();
const shouldShowOption = (item) => {
//return !item.disabled;
return item;
// 检查 weiJianTab 是否不等于 0
if (weiJianTab.value !== 0) {
// 排除 label 为“归档”和“未检”的项
return item.label !== '归档' && item.label !== '未检';
} else {
// 只排除 label 为“归档”的项
return item.label !== '归档';
}
};
tableHeight.value = window.innerHeight - 600;
@@ -303,7 +308,7 @@ const operationMinWidth = ref(200);
const selectionShow = ref(true);
const channelsTest = ref()
const testPopup = ref()
const weiJianTab = ref(0)//除设备检测外，检测结果不显示'未检'
const channelsSelection = ref<Device.ResPqDev[]>([])
const props = defineProps({
id: {
@@ -506,18 +511,6 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
return '';
}
},
{
prop: 'documentState',
label: '归档状态',
minWidth: 100,
sortable:true,
isShow: documentStateShow,
render: scope => {
return (
scope.row.documentState === 0 ? '未归档' : '已归档'
)
},
},
{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 200 ,isShow: operationShow},
])
@@ -606,6 +599,7 @@ const sortTable = ({
//顶部功能切换时修改activeTabs
const changeActiveTabs = (val: number,val2: number,tabledata:any[]) => {
form.value.activeTabs = val;
form.value.activeChildTabs= val2;
deviceData.value = tabledata;
@@ -615,6 +609,7 @@ const changeActiveTabs = (val: number,val2: number,tabledata:any[]) => {
//根据当前功能，初始化表头下拉框中的默认值和禁用值
function tableHeaderInit(val: number) {
refreshStatusList()
weiJianTab.value = val;
switch (val) {
case 0://设备检测
case 1://手动检测

33
frontend/src/views/home/components/tree.vue
View File

@@ -3,6 +3,7 @@
<div class='search_view'>
<el-input
placeholder='请输入计划名称'
clearable
v-model='searchForm.planName'
></el-input>
<Menu style='width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)'
@@ -15,7 +16,8 @@
:filter-node-method='filterNode'
:props='defaultProps'
node-key='id'
class="filter-tree"
class="filter-tree"
:highlight-current="true"
default-expand-all
:default-checked-keys='defaultChecked'
@node-click='handleNodeClick'
@@ -35,13 +37,14 @@
<script lang='ts' setup>
import { type Plan } from '@/api/plan/interface';
import { Menu, Platform, CircleCheck,Loading } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue';
import { nextTick, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router'
import {useCheckStore} from "@/stores/modules/check";
const router = useRouter()
const checkStore = useCheckStore()
const filterText = ref('')
const treeRef = ref()
const data: any = ref([])
const defaultProps = {
children: 'children',
@@ -62,12 +65,16 @@ const getTreeData = (val: any) => {
checkStore.setPlanCode(node.code)
checkStore.setScriptId(node.scriptId)
checkStore.setErrorSysId(node.errorSysId)
console.log(checkStore.planId,checkStore.planCode,checkStore.scriptId,checkStore.errorSysId)
// 高亮显示第一个节点
// 使用 nextTick 确保在 DOM 更新后调用 setCurrentKey
nextTick(() => {
treeRef.value?.setCurrentKey(node.id);
});
//console.log(checkStore.planId,checkStore.planCode,checkStore.scriptId,checkStore.errorSysId)
}
}
const filterText = ref('')
const treeRef = ref()
const {updateSelectedTreeNode} = defineProps<{
updateSelectedTreeNode:Function;
}>();
@@ -89,8 +96,10 @@ const handleNodeClick = (data: Plan.ResPlan) => {
}
const filterNode = (value: string, data: any) => {
if (!value) return true
return data.name.includes(value)
return data.name.includes(value)
}
// 点击详情
const detail = () => {
router.push('/plan')
@@ -99,6 +108,8 @@ onMounted(() => {
// console.log()
})
defineExpose({ getTreeData })
</script>
<style lang='scss' scoped>
.plan_tree {
@@ -108,7 +119,7 @@ defineExpose({ getTreeData })
flex-direction: column;
padding: 5px;
// height: calc(100% - 70px);
background-color: #fff;
background-color: #ffffff;
.search_view {
width: 100%;
@@ -142,13 +153,16 @@ defineExpose({ getTreeData })
}
}
}
.filter-tree {
// border: 1px solid #dcdfe6;
min-width: 100%;
height: 97%;
height: 97%;
display: inline-block;
overflow: auto;
margin-top: 12px;
}
//.filter-tree span {
@@ -160,7 +174,6 @@ defineExpose({ getTreeData })
// text-overflow:ellipsis;
// padding-right: 12px;
//}
.leftBox {
// float: left;
// width: 20%;

3
frontend/src/views/home/tabs/dashboard.vue
View File

@@ -44,6 +44,7 @@
:customData="{
title: '设备检测状态',
textAlign: 'left',
}"
:legendData="{
icon: 'circle',
@@ -723,7 +724,7 @@ onUnmounted(() => {
:deep(.el-collapse-item__header) {
color: var(--el-color-primary);
font-size: 14px;
font-size: 18px;
font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
}

14
frontend/src/views/machine/testScript/components/testProjectPopup.vue
View File

@@ -35,8 +35,11 @@
<el-tab-pane label="全局设置菜单">
<!-- 全局设置菜单内容 -->
<div class="form-item-container">
<el-form-item label="频率(Hz)" prop='name'>
<el-input />
<el-form-item label="频率：" prop='name'>
<div class="input-label-container">
<el-input style="width: 100px;" />
<label>Hz</label>
</div>
</el-form-item>
</div>
<div class="button-label-container">
@@ -214,6 +217,13 @@ defineExpose({ open })
.button-label-container label {
margin-right: 10px; /* 按钮和文字之间的距离 */
}
.input-label-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
}
.input-label-container label {
margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
</style>

6
frontend/src/views/machine/testScript/components/testScriptDipTab.vue
View File

@@ -2,7 +2,7 @@
<div class="editor-container">
<div class="left-editor">
<!-- 左侧编辑区域内容 -->
<canvas ref="canvas" width="600" height="165"></canvas>
</div>
<div class="right-editor">
<!-- 右侧编辑区域内容 -->
@@ -30,12 +30,14 @@ canvas {
height: 100%;
}
.left-editor {
flex: 3; /* 左侧区域占据 3/4 的宽度 */
margin-right: 10px; /* 可选：添加间距 */
margin-left: 150px; /* 可选：添加间距 */
}
.right-editor {
flex: 1; /* 右侧区域占据 1/4 的宽度 */
margin-right: 250px; /* 向左侧移动一点 */
}
</style>

11
frontend/src/views/machine/testScript/components/testScriptFlickerTab.vue
View File

@@ -13,7 +13,10 @@
<el-input />
</el-form-item>
<el-form-item label="波动类型" prop='name'>
<el-input />
<el-select placeholder="请选择波动类型" style="width: 150px;">
<el-option label="Hz" :value="1"></el-option>
<el-option label="CPM" :value="0"></el-option>
</el-select>
</el-form-item>
</div>
</el-tab-pane>
@@ -23,7 +26,11 @@
<!-- 全局设置菜单内容 -->
<div >
<el-form-item label="波类型" prop='name'>
<el-input />
<el-select placeholder="请选择波类型">
<el-option label="RECT" :value="2"></el-option>
<el-option label="SIN" :value="1"></el-option>
<el-option label="SQU" :value="0"></el-option>
</el-select>
</el-form-item>
</div>
<div >

65
frontend/src/views/machine/testScript/components/testScriptHarmTab.vue
View File

@@ -6,27 +6,39 @@
<div class="table-container">
<el-table :data="tableData1" border class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/>
<el-table-column prop="date" label="谐波含有率" width="125">
<el-table-column prop="date" label="谐波含有率" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" width="125">
<el-table-column prop="name" label="谐波相角" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>°</label>
</div>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData2" border class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/>
<el-table-column prop="date" label="谐波含有率" width="125">
<el-table-column prop="date" label="谐波含有率" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" width="125">
<el-table-column prop="name" label="谐波相角" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>°</label>
</div>
</template>
</el-table-column>
</el-table>
@@ -39,28 +51,39 @@
<div class="table-container">
<el-table :data="tableData1" border class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/>
<el-table-column prop="date" label="谐波含有率" width="125">
<el-table-column prop="date" label="谐波含有率" width="120">
<template #default="scope">
<el-input />
<label>123%</label>
<div class="input-label-container">
<el-input />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" width="125">
<el-table-column prop="name" label="谐波相角" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>°</label>
</div>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData2" border class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/>
<el-table-column prop="date" label="谐波含有率" width="125">
<el-table-column prop="date" label="谐波含有率" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" width="125">
<el-table-column prop="name" label="谐波相角" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>°</label>
</div>
</template>
</el-table-column>
</el-table>
@@ -132,4 +155,12 @@ for (let i = 26; i <= 50; i++) {
margin-right: 0; /* 最后一个表格不需要右侧间距 */
}
.input-label-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
}
.input-label-container label {
margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
</style>

112
frontend/src/views/machine/testScript/components/testScriptVolCurTab.vue
View File

@@ -1,26 +1,101 @@
<template>
<div class="editor-container">
<div class="left-editor">
<!-- 左侧编辑区域内容 -->
<canvas ref="canvas" width="600" height="165"></canvas>
</div>
<div class="right-editor">
<!-- 右侧编辑区域内容 -->
<el-form-item label="电压有效值(V)">
<el-input v-model="input1" />
</el-form-item>
<el-form-item label="电流有效值(A)">
<el-input v-model="input1" />
</el-form-item>
<el-form-item label="相角(°)">
<el-input v-model="input2" />
</el-form-item>
</div>
<div class="editor-container">
<div class="left-editor">
<!-- 左侧编辑区域内容 -->
<canvas ref="canvas" width="600" height="165"></canvas>
</div>
<div class="right-editor">
<!-- 右侧编辑区域内容 -->
<el-form-item label="电压有效值(V)">
<el-input v-model="input1" />
</el-form-item>
<el-form-item label="电流有效值(A)">
<el-input v-model="input1" />
</el-form-item>
<el-form-item label="相角(°)">
<el-input v-model="input2" />
</el-form-item>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const canvas = ref<HTMLCanvasElement | null>(null);
onMounted(() => {
if (canvas.value) {
const ctx = canvas.value.getContext('2d');
if (ctx) {
drawSineWave(ctx);
}
}
});
function drawSineWave(ctx: CanvasRenderingContext2D) {
const width = canvas.value!.width;
const height = canvas.value!.height;
const amplitude = 50; // 振幅
const frequency = 0.02; // 频率
const offset = height / 2; // 偏移量
// 绘制横轴
ctx.beginPath();
ctx.moveTo(0, offset);
ctx.lineTo(width, offset);
ctx.strokeStyle = 'black';
ctx.stroke();
// 绘制纵轴
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, height);
ctx.stroke();
// 绘制横轴刻度
const xStep = width / 10;
for (let x = 0; x <= width; x += xStep) {
ctx.beginPath();
ctx.moveTo(x, offset - 5);
ctx.lineTo(x, offset + 5);
ctx.stroke();
// 添加横轴刻度标签
ctx.font = '12px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText((x / xStep).toFixed(0), x, offset + 20);
}
// 绘制纵轴刻度
const yStep = height / 10;
for (let y = 0; y <= height; y += yStep) {
ctx.beginPath();
ctx.moveTo(-5, y);
ctx.lineTo(5, y);
ctx.stroke();
// 添加纵轴刻度标签
ctx.font = '12px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'right';
ctx.fillText(((offset - y) / yStep - 5).toFixed(1), -10, y + 5);
}
// 绘制正弦波
ctx.beginPath();
ctx.moveTo(0, offset);
for (let x = 0; x < width; x++) {
const y = offset + amplitude * Math.sin(frequency * x);
ctx.lineTo(x, y);
}
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.stroke();
}
</script>
<style scoped>
@@ -35,10 +110,11 @@ canvas {
.left-editor {
flex: 3; /* 左侧区域占据 3/4 的宽度 */
margin-right: 10px; /* 可选：添加间距 */
margin-left: 150px; /* 可选：添加间距 */
}
.right-editor {
flex: 1; /* 右侧区域占据 1/4 的宽度 */
margin-right: 250px; /* 向左侧移动一点 */
}
</style>

2
frontend/src/views/machine/testScript/components/valueTypePopup.vue
View File

@@ -21,7 +21,7 @@
</div>
<TestScriptPopup ref='testScriptPopup' />
<template #footer>
<div >
<div>
<el-button @click='close()'>取 消</el-button>
<el-button type="primary" @click='save()'>新增</el-button>
</div>