mooho-base-admin-plus 0.1.0

package/src/components/view/view-chart.vue

@@ -0,0 +1,423 @@
+<template>
+  <div>
+    <div
+      :id="uid"
+      style="margin: auto"
+      :style="{ height: setting.chartHeight ? setting.chartHeight + 'px' : '400px', width: setting.chartWidth ? setting.chartWidth + 'px' : '95%' }"
+    ></div>
+    <div>
+      <Button class="ivu-fr" type="error" title="设置" custom-icon="fa fa-cog" v-if="allow('permission/tableView')" @click="openSetting()"></Button>
+    </div>
+    <modal-form ref="setting" view-code="ChartSetting">
+      <template #column="{ code }">
+        <template v-if="code == 'chartXCode' || code == 'chartGroupCode' || code == 'chartValueCode'">
+          <Input type="text" :readonly="true" :clearable="true" v-model="$refs.setting.data[code]" @click="columnCheck(tableView, $refs.setting.data, code)">
+            <template #prepend>
+              <Button custom-icon="fa fa-search" @click="columnCheck(tableView, $refs.setting.data, code)"></Button>
+            </template>
+          </Input>
+        </template>
+      </template>
+      <template #tableColumn="{ table, tableCode, row, code }">
+        <template v-if="tableCode == 'chartSeries' && (code == 'property' || code == 'nameProperty')">
+          <Input type="text" size="small" :readonly="true" v-model="row[code]" @click="columnCheck(tableView, row, code, table)">
+            <template #prepend>
+              <Button size="small" custom-icon="fa fa-search" @click="columnCheck(tableView, row, code, table)"></Button>
+            </template>
+          </Input>
+        </template>
+      </template>
+      <template #footer>
+        <Button type="primary" custom-icon="fa fa-save" @click="saveSetting">保存</Button>
+      </template>
+    </modal-form>
+    <column-check ref="columnCheck" />
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import modelApi from '../../api/model';
+  import customModelApi from '../../api/customModel';
+  import dataSourceApi from '../../api/dataSource';
+  import { mapActions } from 'vuex';
+  import columnCheck from './column-check.vue';
+
+  /**
+   * @displayName view-chart 图表视图
+   */
+  export default {
+    mixins: [mixinPage],
+    components: { columnCheck },
+    data() {
+      return {
+        uid: 'chart_' + (((1 + Math.random()) * 0x10000) | 0).toString(16),
+        data: null,
+        setting: {},
+        tableView: null,
+        chart: null
+      };
+    },
+    props: {
+      /**
+       * 视图代码
+       */
+      viewCode: {
+        type: String
+      },
+      /**
+       * 是否静态数据
+       */
+      static: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {},
+    created() {
+      if (this.viewCode) {
+        this.init(this.viewCode);
+      }
+    },
+    watch: {},
+    methods: {
+      ...mapActions('admin/dataView', { loadDataView: 'load', saveDataViewSetting: 'saveSetting' }),
+      /**
+       * 初始化
+       *
+       * @param {string} viewCode 视图代码
+       * @public
+       */
+      async init(viewCode) {
+        // 加载表格视图
+        let view = await this.loadDataView(viewCode);
+
+        if (view == null) {
+          this.error('视图代码不存在！' + viewCode);
+          return;
+        }
+
+        this.tableView = view.dataView;
+        if (!!(this.tableView.chartSetting || '').trim()) {
+          this.setting = JSON.parse(this.tableView.chartSetting);
+        } else {
+          this.setting = {};
+        }
+
+        // 图表
+        this.chart = this.$echarts.init(document.getElementById(this.uid));
+
+        this.loadData();
+      },
+      /**
+       * 根据表格初始化
+       *
+       * @param {object} tableView 表格视图
+       * @param {object} data 数据
+       * @public
+       */
+      async initWithTable(tableView) {
+        this.tableView = tableView;
+
+        if (!!(this.tableView.chartSetting || '').trim()) {
+          this.setting = JSON.parse(this.tableView.chartSetting);
+        } else {
+          this.setting = {};
+        }
+
+        // 图表
+        this.chart = this.$echarts.init(document.getElementById(this.uid));
+      },
+      /**
+       * 加载数据
+       *
+       * @param {array} staticData 静态数据
+       * @public
+       */
+      async loadData(staticData) {
+        if (this.static) {
+          this.data = staticData;
+        } else {
+          let filter = {};
+          if (this.tableView.filtering) {
+            filter = JSON.parse(this.tableView.filtering);
+          }
+
+          let data = {
+            ...filter
+          };
+
+          if (this.tableView.isGroupBy) {
+            data.isGroupBy = true;
+            data.groupColumn = JSON.parse(this.tableView.groupColumn);
+            data.groupMethod = JSON.parse(this.tableView.groupMethod);
+          }
+
+          if (this.tableView.isCustom) {
+            let res = await customModelApi.query(this.tableView.model, data);
+
+            this.total = res.totalCount;
+            this.data = res.data;
+          } else if (this.tableView.isDataSource) {
+            let res = await dataSourceApi.query(this.tableView.dataSource, data);
+
+            this.total = res.totalCount;
+            this.data = res.table;
+          } else {
+            let res = await modelApi.query(this.tableView.model, data, this.tableView.functionName, this.tableView.functionType);
+
+            this.total = res.totalCount;
+            this.data = res.data;
+          }
+        }
+
+        this.loadChart();
+      },
+      /**
+       * 加载图表
+       *
+       * @public
+       */
+      loadChart(data) {
+        if (data) {
+          this.data = data;
+        }
+
+        // 加载图表
+        if (this.setting.chartXCode) {
+          var option = {
+            title: {
+              text: this.setting.chartTitle,
+              subtext: this.setting.chartSubtitle,
+              left: this.setting.chartTitleAlign == null ? 'left' : this.setting.chartTitleAlign
+            },
+            tooltip: {
+              // trigger: 'item'
+            },
+            legend: {
+              orient: this.setting.chartLegendOrient == null ? null : this.setting.chartLegendOrient,
+              left: this.setting.chartLegendAlign == null ? 'right' : this.setting.chartLegendAlign
+            }
+          };
+
+          if (!this.setting.chartCustomSeries) {
+            if (this.setting.chartType != 'Pie') {
+              let xAxis = Array.from(
+                new Set(
+                  this.data.map(item => {
+                    return this.parseData(item, this.setting.chartXCode);
+                  })
+                )
+              );
+
+              // 柱状图或折线图
+              option.xAxis = {
+                data: xAxis
+              };
+              option.yAxis = {};
+
+              let group = [null];
+
+              if (this.setting.chartGroupCode) {
+                // 有分组
+                group = Array.from(
+                  new Set(
+                    this.data.map(item => {
+                      return this.parseData(item, this.setting.chartGroupCode);
+                    })
+                  )
+                );
+
+                option.legend.data = group;
+              }
+
+              option.series = group.map(item => {
+                let keyData = {};
+                this.data
+                  .filter(data => {
+                    return (item == null && group.length == 1) || this.parseData(data, this.setting.chartGroupCode) == item;
+                  })
+                  .forEach(data => {
+                    let key = this.parseData(data, this.setting.chartXCode);
+                    let value = this.parseData(data, this.setting.chartValueCode);
+
+                    if (key in keyData) {
+                      keyData[key] += value == null ? 0 : value;
+                    } else {
+                      keyData[key] = value == null ? 0 : value;
+                    }
+                  });
+
+                return {
+                  name: item,
+                  type: this.setting.chartType.substr(0, 1).toLowerCase() + this.setting.chartType.substr(1),
+                  data: xAxis.map(item => {
+                    return {
+                      name: item,
+                      value: keyData[item]
+                    };
+                  })
+                };
+              });
+            } else {
+              let group = [null];
+              if (this.setting.chartGroupCode) {
+                // 有分组
+                group = Array.from(
+                  new Set(
+                    this.data.map(item => {
+                      return this.parseData(item, this.setting.chartGroupCode);
+                    })
+                  )
+                );
+              }
+
+              let count = group.length;
+
+              option.series = group.map((item, index) => {
+                let keyData = {};
+                this.data
+                  .filter(data => {
+                    return (item == null && group.length == 1) || this.parseData(data, this.setting.chartGroupCode) == item;
+                  })
+                  .forEach(data => {
+                    let key = this.parseData(data, this.setting.chartXCode);
+                    let value = this.parseData(data, this.setting.chartValueCode);
+
+                    if (key in keyData) {
+                      keyData[key] += value == null ? 0 : value;
+                    } else {
+                      keyData[key] = value == null ? 0 : value;
+                    }
+                  });
+
+                return {
+                  type: 'pie',
+                  radius: (this.setting.itemWidth == null ? 70 : this.setting.itemWidth) + 100 / count,
+                  center: [(100 / (count + 1)) * (index + 1) + '%', '50%'],
+                  datasetIndex: index,
+                  data: Object.keys(keyData).map(key => {
+                    return {
+                      name: key,
+                      value: keyData[key]
+                    };
+                  }),
+                  emphasis: {
+                    itemStyle: {
+                      shadowBlur: 10,
+                      shadowOffsetX: 0,
+                      shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                  }
+                };
+              });
+            }
+          } else {
+            // 自定义分组
+            let chartSeries = JSON.parse(this.setting.chartSeries);
+            let isPie = false;
+
+            if (
+              chartSeries.some(item => {
+                return item.chartType == 'Pie';
+              })
+            ) {
+              // 饼图
+              isPie = true;
+              chartSeries = chartSeries.filter(item => {
+                return item.chartType == 'Pie';
+              });
+            }
+
+            // 指定图表的配置项和数据
+            if (!isPie) {
+              option.xAxis = {
+                data: this.data.map(item => {
+                  return this.parseData(item, this.setting.chartXCode);
+                })
+              };
+              option.yAxis = {};
+              option.legend.data = chartSeries.map(item => {
+                return item.name;
+              });
+              option.series = chartSeries.map(item => {
+                return {
+                  name: item.name,
+                  type: item.chartType.substr(0, 1).toLowerCase() + item.chartType.substr(1),
+                  data: this.data.map(data => {
+                    return this.parseData(data, item.property);
+                  })
+                };
+              });
+            } else {
+              let count = chartSeries.length;
+
+              option.series = chartSeries.map((item, index) => {
+                return {
+                  type: 'pie',
+                  radius: (this.setting.itemWidth == null ? 70 : this.setting.itemWidth) + 100 / count,
+                  center: [(100 / (count + 1)) * (index + 1) + '%', '50%'],
+                  datasetIndex: index,
+                  data: this.data.map(data => {
+                    return {
+                      name: this.parseData(data, item.nameProperty),
+                      value: this.parseData(data, item.property)
+                    };
+                  }),
+                  emphasis: {
+                    itemStyle: {
+                      shadowBlur: 10,
+                      shadowOffsetX: 0,
+                      shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                  }
+                };
+              });
+            }
+          }
+
+          // 使用刚指定的配置项和数据显示图表。
+          this.chart.clear();
+          this.chart.setOption(option);
+        }
+      },
+      // 打开设置
+      openSetting() {
+        if (Object.keys(this.setting).length == 0) {
+          this.$refs.setting.openDefault();
+        } else {
+          this.$refs.setting.open(this.setting);
+        }
+      },
+      // 保存设置
+      async saveSetting() {
+        let isOK = await this.$refs.setting.validate();
+
+        if (!isOK) {
+          this.error('有内容不符合要求，请正确填写！');
+        } else {
+          this.confirm('确定要保存设置吗？', async () => {
+            this.tableView.chartSetting = JSON.stringify(this.$refs.setting.data);
+            await this.saveDataViewSetting(this.tableView);
+            this.success('保存成功！', () => {
+              this.$refs.setting.close();
+              window.location.reload();
+            });
+          });
+        }
+      },
+      // 打开字段选择
+      columnCheck(tableView, row, code, table) {
+        this.$refs.columnCheck.openView(tableView, checked => {
+          row[code] = checked.code;
+          row[code + 'Type'] = checked.dataType;
+
+          //this.$forceUpdate();
+
+          if (table) {
+            table.loadData();
+          }
+        });
+      }
+    }
+  };
+</script>