¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="p-2"> |
| | | <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
| | | <div v-show="showSearch" class="mb-[10px]"> |
| | | <el-card shadow="hover"> |
| | | <el-form ref="queryFormRef" :model="queryParams" :inline="true"> |
| | | <el-form-item label="产ååå·" prop="prodModel"> |
| | | <el-select v-model="queryParams.prodModel" placeholder="è¯·éæ©äº§ååå·" clearable @keyup.enter="handleQuery"> |
| | | <el-option v-for="item in prodModelOptions" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="æµè¯é¡¹ç®" prop="testItem"> |
| | | <el-select v-model="selectedTestItems" :multiple="false" placeholder="è¯·éæ©æµè¯é¡¹ç®" clearable @keyup.enter="handleQuery"> |
| | | <el-option v-for="item in testItemsOptions" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="æ¹æ¬¡å·" prop="batchCode"> |
| | | <el-input v-model="queryParams.batchCode" placeholder="请è¾å
¥æ¹æ¬¡å·" clearable @keyup.enter="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item label="å建æ¶é´" style="width: 308px"> |
| | | <el-date-picker |
| | | v-model="dateRangeCreateTime" |
| | | value-format="YYYY-MM-DD" |
| | | type="daterange" |
| | | range-separator="-" |
| | | start-placeholder="å¼å§æ¥æ" |
| | | end-placeholder="ç»ææ¥æ" |
| | | unlink-panels |
| | | :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="Search" @click="handleQuery">æç´¢</el-button> |
| | | <el-button icon="Refresh" @click="resetQuery">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-card> |
| | | </div> |
| | | </transition> |
| | | |
| | | <el-card shadow="never"> |
| | | <template #header> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['qms:testResult:add']">æ°å¢</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['qms:testResult:edit']">ä¿®æ¹</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['qms:testResult:remove']">å é¤</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['qms:testResult:export']">导åº</el-button> |
| | | </el-col> |
| | | <right-toolbar v-model:showSearch="showSearch" @queryTable="handleQuery"></right-toolbar> |
| | | </el-row> |
| | | </template> |
| | | |
| | | |
| | | <div ref="chartRef" style="width: 100%; height: 660px;"></div> |
| | | |
| | | <!-- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />--> |
| | | </el-card> |
| | | <!-- æ·»å æä¿®æ¹æµè¯ç»æå¯¹è¯æ¡ --> |
| | | <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> |
| | | <el-form ref="testResultFormRef" :model="form" :rules="rules" label-width="80px"> |
| | | <el-form-item label="æ¹æ¬¡å·" prop="batchCode"> |
| | | <el-input v-model="form.batchCode" placeholder="请è¾å
¥æ¹æ¬¡å·" /> |
| | | </el-form-item> |
| | | <el-form-item label="æµè¯åºå·" prop="testNum"> |
| | | <el-input v-model="form.testNum" placeholder="请è¾å
¥æµè¯åºå·" /> |
| | | </el-form-item> |
| | | <el-form-item label="æµè¯é¡¹ç®" prop="testItem"> |
| | | <el-select v-model="form.testItem" placeholder="è¯·éæ©æµè¯é¡¹ç®"> |
| | | <el-option v-for="item in testItemsOptions" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="å®é
çµå" prop="voltage"> |
| | | <el-input v-model="form.voltage" placeholder="请è¾å
¥å®é
çµå" /> |
| | | </el-form-item> |
| | | <el-form-item label="å®é
çµæµ" prop="loadCurrent"> |
| | | <el-input v-model="form.loadCurrent" placeholder="请è¾å
¥å®é
çµæµ" /> |
| | | </el-form-item> |
| | | <el-form-item label="æ åè·ç¦»" prop="stdDistance"> |
| | | <el-input v-model="form.stdDistance" placeholder="请è¾å
¥æ åè·ç¦»" /> |
| | | </el-form-item> |
| | | <el-form-item label="æåºç©" prop="inductor"> |
| | | <el-input v-model="form.inductor" placeholder="请è¾å
¥æåºç©" /> |
| | | </el-form-item> |
| | | <el-form-item label="è¾åºå¼è" prop="output"> |
| | | <el-input v-model="form.output" placeholder="请è¾å
¥è¾åºå¼è" /> |
| | | </el-form-item> |
| | | <el-form-item label="æµè¯æ°æ®" prop="testValue"> |
| | | <el-input v-model="form.testValue" placeholder="请è¾å
¥æµè¯æ°æ®" /> |
| | | </el-form-item> |
| | | <el-form-item label="夿æ¡ä»¶" prop="judgeDetail"> |
| | | <el-input v-model="form.judgeDetail" placeholder="请è¾å
¥å¤ææ¡ä»¶" /> |
| | | </el-form-item> |
| | | <el-form-item label="æµè¯ç»æ" prop="testResult"> |
| | | <el-input v-model="form.testResult" placeholder="请è¾å
¥æµè¯ç»æ" /> |
| | | </el-form-item> |
| | | <el-form-item label="夿³¨" prop="remark"> |
| | | <el-input v-model="form.remark" placeholder="请è¾å
¥å¤æ³¨" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button :loading="buttonLoading" type="primary" @click="submitForm">ç¡® å®</el-button> |
| | | <el-button @click="cancel">å æ¶</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup name="TestResult" lang="ts"> |
| | | import { listTestResultAll, getTestResult, delTestResult, addTestResult, updateTestResult, listTestItem } from '@/api/qms/testResult'; |
| | | import { TestResultVO, TestResultQuery, TestResultForm } from '@/api/qms/testResult/types'; |
| | | import * as echarts from 'echarts'; |
| | | import { listProdModels} from '@/api/qms/batch'; |
| | | |
| | | const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
| | | |
| | | const testResultList = ref<TestResultVO[]>([]); |
| | | const buttonLoading = ref(false); |
| | | const loading = ref(true); |
| | | const showSearch = ref(true); |
| | | const ids = ref<Array<string | number>>([]); |
| | | const single = ref(true); |
| | | const multiple = ref(true); |
| | | const total = ref(0); |
| | | |
| | | // 设置é»è®¤æ¶é´ä¸ºæè¿ä¸ä¸ªæ |
| | | const now = new Date(); |
| | | const dateRangeCreateTime = ref<[DateModelType, DateModelType]>([]); |
| | | const oneMonthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate()); |
| | | dateRangeCreateTime.value = [oneMonthAgo.toISOString().split('T')[0], now.toISOString().split('T')[0]] as [DateModelType, DateModelType]; |
| | | |
| | | const queryFormRef = ref<ElFormInstance>(); |
| | | const testResultFormRef = ref<ElFormInstance>(); |
| | | const chartRef = ref<HTMLDivElement | null>(null); // æ°å¢ chartRef å¼ç¨ |
| | | |
| | | const testItemsOptions = ref<{ label: string, value: string }[]>([]); // æ°å¢æµè¯é¡¹ç®é项 |
| | | const selectedTestItems = ref<string | string[]>([]); // ä¿®æ¹ä¸ºå
¼å®¹åéçç±»å |
| | | |
| | | const dialog = reactive<DialogOption>({ |
| | | visible: false, |
| | | title: '' |
| | | }); |
| | | |
| | | const initFormData: TestResultForm = { |
| | | id: undefined, |
| | | batchCode: undefined, |
| | | testNum: undefined, |
| | | testItem: undefined, |
| | | voltage: undefined, |
| | | loadCurrent: undefined, |
| | | stdDistance: undefined, |
| | | inductor: undefined, |
| | | output: undefined, |
| | | testValue: undefined, |
| | | judgeDetail: undefined, |
| | | testResult: undefined, |
| | | remark: undefined |
| | | } |
| | | const prodModelOptions = ref<{ label: string, value: string }[]>([]); |
| | | |
| | | const data = reactive<PageData<TestResultForm, TestResultQuery>>({ |
| | | form: {...initFormData}, |
| | | queryParams: { |
| | | batchCode: undefined, |
| | | testNum: undefined, |
| | | testItem: undefined, |
| | | voltage: undefined, |
| | | loadCurrent: undefined, |
| | | stdDistance: undefined, |
| | | inductor: undefined, |
| | | output: undefined, |
| | | testValue: undefined, |
| | | judgeDetail: undefined, |
| | | testResult: undefined, |
| | | startTime: undefined, // æ°å¢ startTime åæ®µ |
| | | endTime: undefined, // æ°å¢ endTime åæ®µ |
| | | prodModel: undefined, // æ°å¢äº§ååå·å段 |
| | | params: { |
| | | createTime: undefined, |
| | | } |
| | | }, |
| | | rules: { |
| | | id: [ |
| | | { required: true, message: "ä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | batchCode: [ |
| | | { required: true, message: "æ¹æ¬¡å·ä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | testNum: [ |
| | | { required: true, message: "æµè¯åºå·ä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | testItem: [ |
| | | { required: true, message: "æµè¯é¡¹ç®ä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | voltage: [ |
| | | { required: true, message: "å®é
çµåä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | loadCurrent: [ |
| | | { required: true, message: "å®é
çµæµä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | stdDistance: [ |
| | | { required: true, message: "æ åè·ç¦»ä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | inductor: [ |
| | | { required: true, message: "æåºç©ä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | output: [ |
| | | { required: true, message: "è¾åºå¼èä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | testValue: [ |
| | | { required: true, message: "æµè¯æ°æ®ä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | judgeDetail: [ |
| | | { required: true, message: "夿æ¡ä»¶ä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | testResult: [ |
| | | { required: true, message: "æµè¯ç»æä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | prodModel: [ |
| | | { required: true, message: "产ååå·ä¸è½ä¸ºç©º", trigger: "blur" } |
| | | ], |
| | | } |
| | | }); |
| | | |
| | | const { queryParams, form, rules } = toRefs(data); |
| | | |
| | | // è·åæææµè¯é¡¹ç® |
| | | const fetchTestItems = async () => { |
| | | const res = await listTestItem(); |
| | | testItemsOptions.value = res.data.map(item => ({ label: item, value: item })); |
| | | } |
| | | // è·åææäº§ååå· |
| | | const fetchProdModels = async () => { |
| | | const res = await listProdModels(); |
| | | prodModelOptions.value = res.data.map(item => ({ label: item, value: item })); |
| | | } |
| | | |
| | | /** æ¥è¯¢æµè¯ç»æå表 */ |
| | | const getList = async () => { |
| | | loading.value = true; |
| | | queryParams.value.params = {}; |
| | | // å¤ç selectedTestItems çå¼ï¼å
¼å®¹åéåå¤é |
| | | if (Array.isArray(selectedTestItems.value)) { |
| | | queryParams.value.testItem = selectedTestItems.value.join(','); // å¤éæ¨¡å¼ |
| | | } else { |
| | | queryParams.value.testItem = selectedTestItems.value; // å鿍¡å¼ |
| | | } |
| | | proxy?.addDateRange(queryParams.value, dateRangeCreateTime.value, 'CreateTime'); |
| | | const res = await listTestResultAll(queryParams.value); |
| | | testResultList.value = res.data; |
| | | loading.value = false; |
| | | updateChart(); // æ´æ°å¾è¡¨ |
| | | } |
| | | |
| | | // çå¬ testResultList çååï¼å¨ææ´æ°å¾è¡¨ |
| | | watch(testResultList, () => { |
| | | updateChart(); |
| | | }); |
| | | |
| | | /** åæ¶æé® */ |
| | | const cancel = () => { |
| | | reset(); |
| | | dialog.visible = false; |
| | | } |
| | | |
| | | /** 表åéç½® */ |
| | | const reset = () => { |
| | | form.value = {...initFormData}; |
| | | |
| | | testResultFormRef.value?.resetFields(); |
| | | } |
| | | |
| | | /** æç´¢æé®æä½ */ |
| | | const handleQuery = () => { |
| | | // æ ¡éªæ¶é´èå´æ¯å¦è¶
è¿ä¸ä¸ªæ |
| | | if (dateRangeCreateTime.value[0] && dateRangeCreateTime.value[1]) { |
| | | const startDate = new Date(dateRangeCreateTime.value[0]); |
| | | const endDate = new Date(dateRangeCreateTime.value[1]); |
| | | const timeDiff = endDate.getTime() - startDate.getTime(); |
| | | const maxDuration = 90 * 24 * 60 * 60 * 1000; // ä¸ä¸ªæçæ¯«ç§æ° |
| | | |
| | | if (timeDiff > maxDuration) { |
| | | proxy?.$modal.msgWarning("æ¶é´èå´ä¸è½è¶
è¿ä¸ä¸ªæï¼è¯·éæ°éæ©ï¼"); |
| | | return; |
| | | } |
| | | } |
| | | |
| | | // æ ¡éªäº§ååå·æ¯å¦éæ© |
| | | if (!queryParams.value.prodModel) { |
| | | proxy?.$modal.msgWarning("è¯·éæ©äº§ååå·ï¼"); |
| | | return; |
| | | } |
| | | |
| | | getList(); |
| | | } |
| | | |
| | | /** éç½®æé®æä½ */ |
| | | const resetQuery = () => { |
| | | dateRangeCreateTime.value = ['', '']; |
| | | queryFormRef.value?.resetFields(); |
| | | selectedTestItems.value = []; // éç½®éä¸çæµè¯é¡¹ç® |
| | | reset(); // è°ç¨éç½®æ¹æ³ä»¥æ¸
空æ¶é´æ®µå段 |
| | | } |
| | | |
| | | /** å¤éæ¡é䏿°æ® */ |
| | | const handleSelectionChange = (selection: TestResultVO[]) => { |
| | | ids.value = selection.map(item => item.id); |
| | | single.value = selection.length != 1; |
| | | multiple.value = !selection.length; |
| | | } |
| | | |
| | | /** æ°å¢æé®æä½ */ |
| | | const handleAdd = () => { |
| | | reset(); |
| | | dialog.visible = true; |
| | | dialog.title = "æ·»å æµè¯ç»æ"; |
| | | } |
| | | |
| | | /** ä¿®æ¹æé®æä½ */ |
| | | const handleUpdate = async (row?: TestResultVO) => { |
| | | reset(); |
| | | const _id = row?.id || ids.value[0] |
| | | const res = await getTestResult(_id); |
| | | Object.assign(form.value, res.data); |
| | | dialog.visible = true; |
| | | dialog.title = "ä¿®æ¹æµè¯ç»æ"; |
| | | } |
| | | |
| | | /** æäº¤æé® */ |
| | | const submitForm = () => { |
| | | testResultFormRef.value?.validate(async (valid: boolean) => { |
| | | if (valid) { |
| | | buttonLoading.value = true; |
| | | if (form.value.id) { |
| | | await updateTestResult(form.value).finally(() => buttonLoading.value = false); |
| | | } else { |
| | | await addTestResult(form.value).finally(() => buttonLoading.value = false); |
| | | } |
| | | proxy?.$modal.msgSuccess("æä½æå"); |
| | | dialog.visible = false; |
| | | await handleQuery(); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | /** å é¤æé®æä½ */ |
| | | const handleDelete = async (row?: TestResultVO) => { |
| | | const _ids = row?.id || ids.value; |
| | | await proxy?.$modal.confirm('æ¯å¦ç¡®è®¤å 餿µè¯ç»æç¼å·ä¸º"' + _ids + '"çæ°æ®é¡¹ï¼').finally(() => loading.value = false); |
| | | await delTestResult(_ids); |
| | | proxy?.$modal.msgSuccess("å 餿å"); |
| | | await handleQuery(); |
| | | } |
| | | |
| | | /** å¯¼åºæé®æä½ */ |
| | | const handleExport = () => { |
| | | proxy?.download('qms/testResult/export', { |
| | | ...queryParams.value |
| | | }, `testResult_${new Date().getTime()}.xlsx`) |
| | | } |
| | | |
| | | // æ´æ°å¾è¡¨ |
| | | const updateChart = () => { |
| | | if (!chartRef.value) return; |
| | | // 鿝已æçå¾è¡¨å®ä¾ |
| | | const existingChart = echarts.getInstanceByDom(chartRef.value); |
| | | if (existingChart) { |
| | | existingChart.dispose(); |
| | | } |
| | | const chart = echarts.init(chartRef.value); |
| | | |
| | | // å®ä¹20个ä¸éå¤çé¢è²æ± |
| | | const colorPool = [ |
| | | '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', |
| | | '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#5e7ce0', |
| | | '#f0c757', '#ff9f7f', '#d48265', '#7fb80e', '#b37feb', |
| | | '#4dc9b0', '#f47920', '#65b581', '#f08585', '#4a90e2', |
| | | // æ°å¢é¢è²ä»¥æé«å¯¹æ¯åº¦ |
| | | '#ff6f61', '#ffd700', '#00ced1', '#da70d6', '#adff2f' |
| | | ]; |
| | | |
| | | // 使ç¨Mapæ¿ä»£Objectæ´é«æ |
| | | const seriesMap = new Map<string, [string, number][]>(); |
| | | testResultList.value.forEach(item => { |
| | | const key = item.testItem; |
| | | if (!seriesMap.has(key)) { |
| | | seriesMap.set(key, []); |
| | | } |
| | | seriesMap.get(key)?.push([item.createTime, item.testValue]); |
| | | }); |
| | | |
| | | // è§£ææå䏿¡æ°æ®ç夿æ¡ä»¶å段 |
| | | let upperLimit: number | null = null; |
| | | let lowerLimit: number | null = null; |
| | | if (testResultList.value.length > 0) { |
| | | const lastItem = testResultList.value[testResultList.value.length - 1]; |
| | | const judgeDetail = lastItem.judgeDetail; |
| | | console.log('judgeDetail:', judgeDetail) |
| | | const regex = /(\d+\.\d+)\s*(V|mA|uA)\s*â¤\s*result\s*â¤\s*(\d+\.\d+)\s*(V|mA|uA)/; |
| | | const match = judgeDetail.match(regex); |
| | | console.log('match:', match) |
| | | if (match) { |
| | | lowerLimit = parseFloat(match[1]); |
| | | upperLimit = parseFloat(match[3]); |
| | | } |
| | | } |
| | | |
| | | console.log('upperLimit:', upperLimit, 'lowerLimit:', lowerLimit) |
| | | // è®¡ç®æ°çä¸ä¸éå¼ï¼å¢å 20% |
| | | const paddingPercentage = 0.1; // 20%çpadding |
| | | // 计ç®ä¸éç20%æ¯å¤å° |
| | | let padding = lowerLimit * paddingPercentage; |
| | | |
| | | console.log("padding",padding) |
| | | |
| | | let newLowerLimit = lowerLimit !== null ? (lowerLimit - padding) : undefined; |
| | | let newUpperLimit = upperLimit !== null ? (upperLimit + padding) : undefined; |
| | | |
| | | |
| | | const option = { |
| | | grid: { |
| | | top: '15%', |
| | | left: '5%', |
| | | right: '5%', |
| | | containLabel: true |
| | | }, |
| | | xAxis: { |
| | | type: 'time', |
| | | name: 'æ¶é´' |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: 'æµè¯æ°æ®', |
| | | min: newLowerLimit, // ä½¿ç¨æ°çä¸éå¼ |
| | | max: newUpperLimit, // ä½¿ç¨æ°çä¸éå¼ |
| | | axisLabel: { |
| | | formatter: function (value: number) { |
| | | return value; |
| | | } |
| | | } |
| | | }, |
| | | legend: { |
| | | data: Array.from(seriesMap.keys()) |
| | | }, |
| | | series: Array.from(seriesMap).map(([name, data], index) => ({ |
| | | name: name, |
| | | data: data, |
| | | type: 'line', |
| | | animationDuration: 1000, |
| | | lineStyle: { |
| | | color: colorPool[index % colorPool.length], |
| | | width: 2 // å¢å 线æ¡å®½åº¦ |
| | | }, |
| | | itemStyle: { |
| | | color: colorPool[index % colorPool.length], |
| | | opacity: 0.8 // æ·»å éæåº¦ |
| | | }, |
| | | markLine: { |
| | | symbol: ['none', 'none'], |
| | | label: { |
| | | position: 'end', |
| | | align: 'center', // æ·»å align 屿§ä»¥å®ç°å±
ä¸å¯¹é½ |
| | | formatter: function (params: any) { |
| | | const name = params.name || ''; // ä¸éæä¸éæ è¯ |
| | | const value = params.value || ''; // 对åºçæ°å¼ |
| | | return `${name}\n${value}`; // æ¢è¡æ¾ç¤ºï¼ç¡®ä¿ä¸ä¸è¡å
容æ¸
æ° |
| | | } |
| | | }, |
| | | lineStyle: { |
| | | color: 'red', |
| | | type: 'dashed' |
| | | }, |
| | | data: [ |
| | | { |
| | | name: 'ä¸é', |
| | | yAxis: lowerLimit !== null ? lowerLimit : undefined |
| | | }, |
| | | { |
| | | name: 'ä¸é', |
| | | yAxis: upperLimit !== null ? upperLimit : undefined |
| | | } |
| | | ] |
| | | }, |
| | | // markLine: { |
| | | // data: [{ type: 'average', name: 'Avg' }] |
| | | // } |
| | | })), |
| | | // æ°å¢ dataZoom é
ç½® |
| | | dataZoom: [ |
| | | { |
| | | type: 'slider', // Xè½´æ»å¨æ¡ |
| | | xAxisIndex: 0, |
| | | start: 0, // åå§èå´èµ·ç¹ç¾åæ¯ |
| | | end: 100 // åå§èå´ç»ç¹ç¾åæ¯ |
| | | }, |
| | | { |
| | | type: 'slider', // Yè½´æ»å¨æ¡ |
| | | yAxisIndex: 0, |
| | | start: 0, // åå§èå´èµ·ç¹ç¾åæ¯ |
| | | end: 100 // åå§èå´ç»ç¹ç¾åæ¯ |
| | | }, |
| | | { |
| | | type: 'inside', // Xè½´å
ç½®æå¨åæ¡é |
| | | xAxisIndex: 0, |
| | | start: 0, |
| | | end: 100 |
| | | }, |
| | | { |
| | | type: 'inside', // Yè½´å
ç½®æå¨åæ¡é |
| | | yAxisIndex: 0, |
| | | start: 0, |
| | | end: 100 |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | chart.setOption(option, true); |
| | | window.addEventListener('resize', () => { |
| | | chart.resize(); |
| | | }); |
| | | } |
| | | |
| | | onMounted(() => { |
| | | fetchTestItems(); // è°ç¨è·åæµè¯é¡¹ç®æ¥å£ |
| | | fetchProdModels(); // è°ç¨è·å产ååå·æ¥å£ |
| | | }); |
| | | </script> |