单独构建大屏ui库,避免引入混乱

2024-04-12 10:22:47 +08:00
parent a4d4e3cea5
commit b5523f5f40
191 changed files with 374 additions and 355 deletions
--- a/ui/dv/layout/AiDvPlot/AiDvPlot.vue
+++ b/ui/dv/layout/AiDvPlot/AiDvPlot.vue
@@ -0,0 +1,126 @@
+<template>
+  <section class="AiDvPlot">
+    <ai-select class="plotPicker" v-model="current" :select-list="charts" @change="handleChangeChart"/>
+    <div class="plotChart" ref="DvPlot"/>
+  </section>
+</template>
+<script>
+import {DvCompData} from "../../index";
+
+export default {
+  name: "AiDvPlot",
+  props: {
+    options: {default: () => []},
+    instance: Function
+  },
+  data() {
+    return {
+      current: 0,
+      chart: null
+    }
+  },
+  computed: {
+    charts: v => v.options.map((e, id) => ({id, label: e.title})),
+    plot: v => v.options[v.current],
+    tpl: v => v.$echartTpls[v.plot.chart]
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.DvPlot)
+      this.handleChangeChart()
+    },
+    handleChangeChart() {
+      const series = this.tpl.series || Array(this.plot.dimensions.length - 1).fill(this.tpl.daemon)
+      this.chart.clear()
+      this.chart.setOption({
+        tooltip: {},
+        xAxis: {
+          type: 'category', nameGap: 20, axisTick: false,
+          axisLabel: {
+            color: '#C3C4C4',
+            interval: 0,
+          },
+          axisLine: {
+            lineStyle: {
+              width: 1
+            }
+          }
+        },
+        // 声明一个 Y 轴，数值轴。
+        yAxis: {
+          nameGap: 23, minInterval: 1,
+          splitLine: {
+            lineStyle: {
+              type: 'dashed'
+            }
+          },
+          axisLabel: {color: '#C3C4C4'},
+          axisLine: {
+            lineStyle: {
+              color: '#C3C4C4'
+            }
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          top: '26px',
+          containLabel: true
+        }, series, ...this.tpl
+      })
+      this.getChartData()
+    },
+    getChartData() {
+      return new DvCompData(this.plot.dataType, this.plot, this.instance).getData().then(source => {
+        if (this.tpl.series?.type == 'pie') {
+          let data
+          if (source?.length == 1) {
+            data = this.plot.dimensions.filter(Boolean).map(name => ({name, value: source[0][name]}))
+          } else {
+            const ds = this.plot.dimensions.filter(Boolean)
+            data = source.map(e => ({name: e[ds[0]], value: e[ds[1]]}))
+          }
+          this.chart.setOption({series: {data}})
+        } else {
+          const dataset = {source}
+          dataset.dimensions = this.plot.dimensions.filter(Boolean) || []
+          this.chart.setOption({dataset})
+        }
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(this.initChart)
+  }
+}
+</script>
+<style scoped lang="scss">
+.AiDvPlot {
+  position: relative;
+  height: 100%;
+
+  :deep(.plotPicker) {
+    position: absolute;
+    right: 12px;
+    top: -10px;
+    z-index: 9;
+
+    .el-select {
+      .el-input__inner {
+        background: #218ffd1a;
+        border: 1px solid #1F66AD;
+        color: #2FC5FF;
+      }
+
+      .el-input__suffix {
+        color: #2FC5FF !important;
+      }
+    }
+  }
+
+  .plotChart {
+    height: 100%;
+  }
+}
+</style>