add - panel

wujian

5 天以前 ea3c33c8561df39d4f123d1424fda99dd0f0c51d

 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>-->
<!--&lt;!&ndash;        <v-chart :option="chartOption" :style="{width: '600px', height: '400px'}"/>&ndash;&gt;-->
<!--        <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 = []; // 重置日期范围
        }
      }