zbcx_ckyc 1.0.0

package/src/plugins/app/znycpjxt/DataAnlyModel/Qqt/QqtEcharts.vue

@@ -0,0 +1,202 @@
+<style lang='scss' scoped>
+  .mycharts {width: 100%; height: 100%;}
+</style>
+
+<template>
+  <div class="mycharts" ref="mycharts"></div>
+</template>
+
+<script>
+
+/**
+* 组件 - 基础统计分析 - QQ/PP图结果展示
+*/
+
+/**
+ * 修改记录:
+ * 24-05-15   张光辉      首次编写
+ */
+import * as echarts from 'echarts'
+export default
+{
+  props:
+  {
+    datas: { type: Object, default: () => ({}) }
+  },
+  data()
+  {
+    return {
+    }
+  },
+
+  // 属性监听，处理属性变化后有大量操作
+  watch:
+  {
+    datas:
+    {
+      deep: true,
+      handler(newData)
+      {
+        if (this.myChart)
+          this.setOpt(newData)
+      }
+    }
+  },
+
+  // 组件dom挂载成功
+  mounted()
+  {
+    this.myChart = null
+    this.initCharts()
+  },
+
+  // 按功能相关性组织函数块，函数名体现功能
+  methods:
+  {
+    initCharts()
+    {
+      this.myChart = echarts.init(this.$refs.mycharts)
+      this.setOpt(this.datas)
+    },
+
+    setOpt(datas)
+    {
+      let option = this.getOption(datas)
+      this.myChart.setOption(option)
+    },
+
+    markLineOpt(line)
+    {
+      let obj = {
+        animation: false,
+        label: {
+          formatter: line.label,
+          align: 'right'
+        },
+        lineStyle: {
+          type: 'solid',
+          color: 'red'
+        },
+        tooltip: {
+          formatter: line.label
+        },
+        data: [
+          [
+            {
+              coord: [line.x0, line.y0],
+              symbol: 'none'
+            },
+            {
+              coord: [line.x1, line.y1],
+              symbol: 'none'
+            }
+          ]
+        ]
+      }
+      return obj
+    },
+
+    makedata(x, y)
+    {
+      let dataAll = []
+      let lenx = x.length, maxx = 0, minx = 0, maxy = 0, miny = 0
+      for (let i = 0; i < lenx; i++)
+      {
+        maxx = Math.max(x[i], maxx)
+        minx = Math.min(x[i], minx)
+        maxy = Math.max(x[i], maxy)
+        miny = Math.min(x[i], miny)
+        dataAll.push([x[i], y[i]])
+      }
+      return {
+        dataAll,
+        maxx,
+        minx,
+        maxy,
+        miny
+      }
+    },
+
+    getOption(datas)
+    {
+      let { dataAll, maxx, minx, maxy, miny } = this.makedata(datas.x, datas.y)
+      maxx = datas.line.x1
+      minx = datas.line.x0
+      maxy = datas.line.y1
+      miny = datas.line.y0
+
+      let option = {
+        title: {
+          text: datas.title,
+          left: 'center',
+          top: 0
+        },
+
+        tooltip: {
+          formatter: 'Group {a}: ({c})'
+        },
+        xAxis: [
+          {
+            gridIndex: 0,
+            min: minx,
+            max: maxx,
+            axisLabel: {
+              formatter: function(value)
+              {
+                return value.toFixed(2)
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            gridIndex: 0,
+            min: miny,
+            max: maxy,
+            axisLabel: {
+              formatter: function(value)
+              {
+                return value.toFixed(2)
+              }
+            }
+          }
+        ],
+        toolbox: {
+          feature: {
+            saveAsImage: { show: true }
+          }
+        },
+        series: [
+          {
+            name: 'I',
+            type: 'scatter',
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            data: dataAll,
+            markLine: this.markLineOpt(datas.line)
+          }
+        ],
+        dataZoom: [
+          {
+            type: 'inside',
+            xAxisIndex: [0]
+          },
+          {
+            type: 'inside',
+            yAxisIndex: [0]
+          },
+          {
+            type: 'slider',
+            xAxisIndex: [0]
+          },
+          {
+            type: 'slider',
+            yAxisIndex: [0]
+          }
+        ]
+      }
+      return option
+    }
+  }
+}
+</script>

package/src/plugins/app/znycpjxt/DataAnlyModel/Qqt.vue

@@ -0,0 +1,88 @@
+<style lang='scss' scoped>
+  .cust-border { width: 100%; height: 100%; border: 0.01rem solid var(--cx-colorBorder1); padding: 0.16rem; box-sizing: border-box; }
+</style>
+
+<template>
+ <cx-layout padding>
+  <cx-region region="west" width="4.2rem" gutter>
+    <LeftForm :sfmk="sfmk" @ok-click="onOk"></LeftForm>
+  </cx-region>
+  <cx-region region="center" >
+    <RightContent @ok-click="onExportResult"  title="输出">
+      <QqtEcharts ref="chartRef" v-if="qqtdatas.x.length" :datas="qqtdatas"></QqtEcharts>
+    </RightContent>
+  </cx-region>
+ </cx-layout>
+</template>
+
+<script>
+
+/**
+ * 插件 - 数据分析模型-QQ/PP图
+ */
+
+/**
+ * 修改记录:
+ * 24-05-15   张光辉      首次编写
+ */
+import LeftForm from '../coms/LeftForm'
+import RightContent from '../coms/RightContent'
+import Api from '../Api.js'
+import QqtEcharts from './Qqt/QqtEcharts'
+export default
+{
+  mixins: [cx.mixin.IComBase],
+  components: { LeftForm, RightContent, QqtEcharts },
+  data()
+  {
+    return {
+      sfmk: { name: 'QQ/PP图', type: 'dataanly' },
+      qqtdatas: {
+        x: [], y: []
+      }
+    }
+  },
+
+  // 按功能相关性组织函数块，函数名体现功能
+  methods:
+  {
+    /**
+     * 表单确定回调
+     * @param {Object} form 表单数据
+     */
+    onOk(form)
+    {
+      Api.qpgraph(form).then((res) =>
+      {
+        if (res.ret !== 0)
+          return this.$showMsg(res.msg, 'error')
+        this.qqtdatas = res
+      }).catch((err) =>
+      {
+        this.$showRet(err)
+      })
+    },
+
+    /**
+     * 导出结果
+     */
+    onExportResult()
+    {
+      if (this.$refs.chartRef.myChart)
+      {
+        let base = this.$refs.chartRef.myChart.getDataURL({
+          pixelRatio: 2,
+          backgroundColor: 'var(--cx-colorBg5)'
+        })
+        let a = document.createElement('a')
+        a.href = base
+        a.download = `数据分析模型-QQ/PP图.jpg`
+        a.style.display = 'none'
+        document.body.appendChild(a)
+        a.click()
+        a.remove()
+      }
+    }
+  }
+}
+</script>

package/src/plugins/app/znycpjxt/DataAnlyModel/Xgxfx/XgxfxImg.vue

@@ -0,0 +1,80 @@
+<style lang='scss' scoped>
+.imgs-cont {display: flex;position: relative;}
+.pic_dc{position: absolute;right: 0.5%;top: 1%;}
+</style>
+
+<template>
+  <div class="imgs-cont">
+    <el-icon v-if="url" class="pic_dc" @click="download"><Download /></el-icon>
+    <el-image v-if="url"
+    style="width: 8rem; height: 6rem; margin: auto;"
+      :src="url"
+      :preview-src-list="[url]"
+      fit="fit"
+    />
+  </div>
+</template>
+
+<script>
+
+/**
+* 组件 - 基础统计分析 - 回归分析图
+*/
+
+/**
+ * 修改记录:
+ * 24-05-21   张光辉      首次编写
+ */
+export default
+{
+  props:
+  {
+    datas: { type: Object, default: () => ({}) }
+  },
+  data()
+  {
+    return {
+      url: ''
+    }
+  },
+
+  // 属性监听，处理属性变化后有大量操作
+  watch:
+  {
+    datas:
+    {
+      deep: true,
+      handler(newData)
+      {
+        this.url = 'data:image/png;base64,' + newData.graph
+      }
+    }
+  },
+
+  // 组件dom挂载成功
+  mounted()
+  {
+    if (this.datas.graph)
+      this.url = 'data:image/png;base64,' + this.datas.graph
+  },
+
+  // 按功能相关性组织函数块，函数名体现功能
+  methods:
+  {
+    // 导出图片
+    download()
+    {
+      if (this.url)
+      {
+        let a = document.createElement('a')
+        a.href = this.url
+        a.download = `分析结果.png`
+        a.style.display = 'none'
+        document.body.appendChild(a)
+        a.click()
+        a.remove()
+      }
+    }
+  }
+}
+</script>

package/src/plugins/app/znycpjxt/DataAnlyModel/Xgxfx.vue

@@ -0,0 +1,96 @@
+<style lang='scss' scoped>
+  .cust-border { width: 100%; height: 100%; border: 0.01rem solid var(--cx-colorBorder1); padding: 0.16rem; box-sizing: border-box; }
+</style>
+
+<template>
+ <cx-layout padding>
+  <cx-region region="west" width="4.2rem" gutter>
+    <LeftForm :multiple="multiple" :sfmk="sfmk" @ok-click="onOk"></LeftForm>
+  </cx-region>
+  <cx-region region="center" >
+    <RightContent @ok-click="onExportResult"  title="输出">
+      <XgxfxImg :datas="datas"></XgxfxImg>
+    </RightContent>
+  </cx-region>
+ </cx-layout>
+</template>
+
+<script>
+
+/**
+ * 插件 - 数据分析模型-相关性分析
+ */
+
+/**
+ * 修改记录:
+ * 24-05-15   张光辉      首次编写
+ */
+import LeftForm from '../coms/LeftForm'
+import RightContent from '../coms/RightContent'
+import XgxfxImg from './Xgxfx/XgxfxImg'
+
+import Api from '../Api.js'
+export default
+{
+  mixins: [cx.mixin.IComBase],
+  components: { LeftForm, RightContent, XgxfxImg },
+  data()
+  {
+    return {
+      multiple: true,
+      sfmk: { name: '相关性分析', type: 'dataanly' },
+      datas: {}
+    }
+  },
+
+  // 按功能相关性组织函数块，函数名体现功能
+  methods:
+  {
+    /**
+     * 表单确定回调
+     * @param {Object} form 表单数据
+     */
+    onOk(form)
+    {
+      if (form.cols.length <= 1)
+        return this.$showMsg('至少选择两个分析字段', 'warning')
+      this.datas = {}
+      vm.$processing.show()
+      Api.correlation(form).then((res) =>
+      {
+        vm.$processing.close()
+        if (res.ret !== 0)
+          return this.$showMsg(res.msg, 'error')
+        this.datas = res
+      }).catch((err) =>
+      {
+        vm.$processing.close()
+        this.$showRet(err)
+      })
+    },
+
+    /**
+     * 导出结果
+     */
+    onExportResult()
+    {
+      if (this.datas.correlation)
+      {
+        let flds = Object.keys(this.datas.correlation[0])
+        let columns = {}
+        flds.forEach(fld =>
+        {
+          columns[fld] = fld
+        })
+        let xls =
+        {
+          columns,
+          json: this.datas.correlation,
+          filename: '数据分析模型-相关性分析'
+        }
+        cx.ExpExcel.exportToExcel(xls)
+      }
+    }
+  }
+}
+</script>