From ea3c33c8561df39d4f123d1424fda99dd0f0c51d Mon Sep 17 00:00:00 2001
From: wujian <14790700720@163.com>
Date: 星期四, 14 十一月 2024 08:15:41 +0800
Subject: [PATCH] add - panel
---
jcdm-ui/src/views/main/da/spcDataAnalyse/index.vue | 168 ++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 146 insertions(+), 22 deletions(-)
diff --git a/jcdm-ui/src/views/main/da/spcDataAnalyse/index.vue b/jcdm-ui/src/views/main/da/spcDataAnalyse/index.vue
index 09960e3..968ca5d 100644
--- a/jcdm-ui/src/views/main/da/spcDataAnalyse/index.vue
+++ b/jcdm-ui/src/views/main/da/spcDataAnalyse/index.vue
@@ -56,18 +56,28 @@
<el-card style="margin-top: 10px" class="box-card">
<el-row :gutter="10" class="mb8">
<el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane label="鐢ㄦ埛绠＄悊" name="first">鐢ㄦ埛绠＄悊</el-tab-pane>
- <el-tab-pane label="閰嶇疆绠＄悊" name="second">閰嶇疆绠＄悊</el-tab-pane>
- <el-tab-pane label="瑙掕壊绠＄悊" name="third">瑙掕壊绠＄悊</el-tab-pane>
+ <el-tab-pane label="姝ｆ�佸垎甯�" name="first">
+ <div>
+ <!-- <v-chart :option="chartOption" :style="{width: '600px', height: '400px'}"/>-->
+ <div ref="chart1" :style="{ width: '900px', height: '400px' }"></div>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="鏁ｅ垪鍥�" name="second">
+ <div ref="chart2" :style="{ width: '900px', height: '400px' }"></div>
+ </el-tab-pane>
</el-tabs>
</el-row>
+<!-- <div>-->
+<!--<!– <v-chart :option="chartOption" :style="{width: '600px', height: '400px'}"/>–>-->
+<!-- <div ref="chart" :style="{ width: '100%', height: '400px' }"></div>-->
+<!-- </div>-->
+<!-- <el-table v-loading="loading" border :data="paramCollectionList" @selection-change="handleSelectionChange" v-if="paramCollectionList.length > 0">-->
- <el-table v-loading="loading" border :data="paramCollectionList" @selection-change="handleSelectionChange" v-if="paramCollectionList.length > 0">
+<!-- </el-table>-->
- </el-table>
- <el-empty v-else>
- <span slot="description">鏆傛棤鏁版嵁</span>
- </el-empty>
+<!-- <el-empty v-else>-->
+<!-- <span slot="description">鏆傛棤鏁版嵁</span>-->
+<!-- </el-empty>-->
</el-card>
@@ -75,13 +85,30 @@
</template>
<script>
-import { listParamCollection, getParamCollection, delParamCollection, addParamCollection, updateParamCollection } from "@/api/main/da/paramCollection/paramCollection";
-import {queryDaParamCollectionListForSearch, getSelectOption, queryChart} from "../../../../api/main/da/paramCollection/paramCollection";
+import {
+ addParamCollection,
+ delParamCollection,
+ getParamCollection,
+ updateParamCollection
+} from "@/api/main/da/paramCollection/paramCollection";
+import {
+ getSelectOption,
+ queryChart,
+ queryDaParamCollectionListForSearch
+} from "../../../../api/main/da/paramCollection/paramCollection";
+import VueECharts from 'vue-echarts';
+import echarts from 'echarts'
+import async from "async";
export default {
name: "ParamCollection",
+ components: {
+ 'v-chart': VueECharts
+ },
data() {
return {
+ convertedData:[],
+ convertedData2:[],
activeName: 'second',
dataTypeList:[
{
@@ -155,16 +182,91 @@
paramValue: [
{ required: true, message: "鍙傛暟鍊间笉鑳戒负绌�", trigger: "blur" }
],
- }
+ },
};
},
created() {
// this.getList();
},
mounted() {
+ this.initChart1();
+ this.initChart2();
this.getSelectOptionMethod()
},
methods: {
+ initChart1() {
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ const chart = echarts.init(this.$refs.chart1);
+
+ // 鎸囧畾鍥捐〃鐨勯厤缃」鍜屾暟鎹�
+ const option = {
+ title: {
+ text: '姝ｆ�佸垎甯冨浘',
+ },
+ tooltip: {},
+ xAxis: {
+ type: 'value',
+ scale: true
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ name: '姝ｆ�佸垎甯�',
+ type: 'line',
+ smooth: true,
+ // data: this.generateNormalDistributionData(10,0,1), // 鍧囧��0锛屾爣鍑嗗樊1鐨勬鎬佸垎甯冩暟鎹�
+ // data: this.queryChartMethod(), // 鍧囧��0锛屾爣鍑嗗樊1鐨勬鎬佸垎甯冩暟鎹�
+ data: this.convertedData, // 鍧囧��0锛屾爣鍑嗗樊1鐨勬鎬佸垎甯冩暟鎹�
+ },
+ ],
+ };
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ chart.setOption(option);
+ },
+ initChart2() {
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ const chart = echarts.init(this.$refs.chart2);
+
+ // 鎸囧畾鍥捐〃鐨勯厤缃」鍜屾暟鎹�
+ const option = {
+ title: {
+ text: '鏁ｅ垪鍥�',
+ },
+ tooltip: {},
+ xAxis: {
+ type: 'category',
+ data:[]
+ },
+ yAxis: {
+ type: 'value',
+ scale: true
+ },
+ series: [
+ {
+ name: '鏁ｅ垪鍥�',
+ type: 'scatter',
+ data: this.convertedData2, // 鍧囧��0锛屾爣鍑嗗樊1鐨勬鎬佸垎甯冩暟鎹�
+ },
+ ],
+ };
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ chart.setOption(option);
+ },
+ generateNormalDistributionData(numPoints, mean, stdDev) {
+ let data = [];
+ for (let i = 0; i < numPoints; i++) {
+ const x = (i - numPoints / 2) / (numPoints / 4); // 缂╂斁鍒板悎閫傜殑X鑼冨洿
+ const y = (1 / (stdDev * Math.sqrt(2 * Math.PI))) * Math.exp(-0.5 * Math.pow((x - mean) / stdDev, 2));
+ data.push([x, y]);
+ }
+ console.log('rrered1111111111ata',data)
+ data = this.chartData
+ return data;
+ },
getSelectOptionMethod(){
getSelectOption(this.queryParams).then(res => {
console.log('rrrrrrr',res)
@@ -174,41 +276,63 @@
}
})
},
- queryChartMethod(){
- queryChart(this.queryParams).then(res => {
+ async queryChartMethod(){
+ //璁＄畻鏂瑰紡鍙互鐧惧害
+ let convertedData = []
+ await queryChart(this.queryParams).then(res => {
if (res.code === 200){
console.log('res',res)
let dataArray = []
if (res.data.length > 0){
res.data.forEach(x => {
- let num = parseInt(x)
+ let num = parseFloat(x)
dataArray.push(num)
})
}
console.log('res222',dataArray)
+ this.convertedData2 = dataArray
let array=dataArray
console.log('arra',array)
// 骞冲潎鍊�
let mean=(array.reduce((a,b)=>a+b))/array.length
+ mean = mean.toFixed(2)
console.log('mean',mean)
// 鏂瑰樊
let variance=array.map(x=>{
return Math.pow(x-mean,2)
}).reduce((a,b)=>a+b)/array.length
- console.log('variance',variance)
+ console.log('variance222',variance)
// 鏍囧噯宸�
let StandardDeviation = Math.sqrt(variance)
+ StandardDeviation = StandardDeviation.toFixed(2)
console.log('StandardDeviation',StandardDeviation)
- //璁＄畻鏂瑰紡鍙互鐧惧害
- let convertedData=[]
- for(let x=mean-3*StandardDeviation;x<=mean + 3*StandardDeviation;x++){
+ console.log('mean-3*StandardDeviation',mean - 3*StandardDeviation)
+ console.log('mean+3*StandardDeviation',parseFloat(mean) + 3*StandardDeviation)
+ let step = 0.1
+
+ for(let x=mean-3*StandardDeviation; x<=parseFloat(mean) + 3*StandardDeviation; x = parseFloat((x+step).toFixed(2))){
+ console.log('x',x)
//for寰幆涓殑鏉′欢浠ｈ〃浣犺鐢熸垚鍑犱釜鏍囧噯宸殑鏁版嵁锛�
// 鍐嶅甫鍏ユ鎬佸垎甯冨叕寮忥紝灏卞彲浠ョ敓鎴愪竴鏉℃暣鏉″垎甯冩洸绾跨殑鏁版嵁
- let y=1/(StandardDeviation*Math.sqrt(2*(Math.PI)))*Math.exp(-(Math.pow(x-mean,2))/(2*(Math.pow(StandardDeviation,2))))
- convertedData.push([x,y])
+ console.log('(StandardDeviation*Math.sqrt(2*(Math.PI)))',(StandardDeviation*Math.sqrt(2*(Math.PI))))
+ console.log('1/(StandardDeviation*Math.sqrt(2*(Math.PI)))',1/(StandardDeviation*Math.sqrt(2*(Math.PI))))
+ console.log('-(Math.pow(x-mean,2))',-(Math.pow(x-mean,2)))
+ console.log('(2*(Math.pow(parseFloat(StandardDeviation),2)))',(2*(Math.pow(parseFloat(StandardDeviation),2))))
+ const temp =1/(StandardDeviation*Math.sqrt(2*(Math.PI)))*Math.exp(-(Math.pow(x-mean,2))/(2*(Math.pow(parseFloat(StandardDeviation),2))))
+ console.log('temp',temp)
+ let y = parseFloat(temp.toFixed(2))
+ console.log('yyyyyyyyyyy',y)
+ let a = []
+ a = [x,y]
+ console.log('a',a)
+ convertedData.push(a)
}
}
})
+ console.log('34535435345',convertedData)
+ this.convertedData = convertedData
+ this.initChart1()
+ this.initChart2()
},
handleClick(tab, event) {
console.log(tab, event);
@@ -218,8 +342,8 @@
const startDate = value[0];
const endDate = value[1];
const dayCount = this.daysBetween(startDate, endDate);
- if (dayCount + 1 > 7) {
- this.$message.error('璇烽�夋嫨杩炵画鐨�7澶╋紒');
+ if (dayCount + 1 > 2) {
+ this.$message.error('璇烽�夋嫨杩炵画鐨�2澶╋紒');
this.queryParams.dateConditions = []; // 閲嶇疆鏃ユ湡鑼冨洿
}
}
--
Gitblit v1.9.3