自定义图表

src/api/system.js

@@ -207,3 +207,8 @@ export function saveLabel (params) {
 export function saveLabelAll (params) {
   return http.post('/label/batch/save', params)
 }
+
+// 统一配置接口 列表
+export function webSettingList (params) {
+  return http.post('/authentication/web/setting/list', params)
+}

src/components/AutoComponents/MDialog/index.vue

@@ -10,7 +10,10 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <slot></slot>
+    <!-- 兼容ie自动撑开 -->
+    <div class="el-dialog__body_content">
+      <slot></slot>
+    </div>
     <span slot="footer" v-if="!hideFooter">
       <m-button @click="show = false">{{ option?.textCancel ?? '取 消'}}</m-button>
       <m-button :type="option?.colorSure ?? 'orange'" @click="sure">{{ option?.textSure ?? '确 定'}}</m-button>
@@ -120,14 +123,20 @@ export default {
     height: 100vh;
     border-spacing: 0; /* 避免单元格间距影响 */
     display: table;
-    .el-dialog__header, .el-dialog__footer {
+    &>.el-dialog__header, &>.el-dialog__footer {
       display: table-cell; /* 固定高度的行 */
       height: 1px; /* 最小高度，内容撑开 */
     }
-    .el-dialog__body {
+    &>.el-dialog__body {
       display: table-row; /* 自动填充剩余高度 */
       height: 100%; /* 关键：占满剩余空间 */
       padding: 0;
+      position: relative;
+      &>.el-dialog__body_content {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 }

src/views/dataChart/privateChart/privateChartEdit.vue

@@ -7,10 +7,12 @@
             <PrivateChartEditType ref="privateChartEditTypeRefs" @change="onChangeOption"></PrivateChartEditType>
           </div>
           <div class="box-main border-box">
-            <PrivateChartEditShow ref="privateChartEditShowRefs" class="fullscreen"></PrivateChartEditShow>
+            <m-card shadow="never" class="fullHeight" :bodyStyle="{ height: '100%' }">
+              <PrivateChartEditShow ref="privateChartEditShowRefs" class="fullscreen"></PrivateChartEditShow>
+            </m-card>
           </div>
           <div class="box-right">
-            <PrivateChartEditParams ref="privateChartEditParamsRefs" class="fullscreen" @change="onChangParams"></PrivateChartEditParams>
+            <PrivateChartEditParams ref="privateChartEditParamsRefs" class="fullscreen" @render="onChangParams" @render:config="onChangeConfig"></PrivateChartEditParams>
           </div>
         </div>
       </m-card>
@@ -41,7 +43,7 @@ export default {
       this.$refs.dialog.open()
     },
     setData (data) {
-      this.$refs.privateChartEditShowRefs.setData(data, this.key, this.option)
+      this.$refs.privateChartEditShowRefs && this.$refs.privateChartEditShowRefs.setData([data], this.key, this.option)
     },
     // 改变整体option
     onChangeOption (key, data) {
@@ -51,8 +53,12 @@ export default {
     },
     // 改变数据参数
     onChangParams (data) {
+      console.log(data)
       this.data = data
       this.setData(data)
+    },
+    onChangeConfig (obj) {
+      console.log(obj)
     }
   }
 }
@@ -63,13 +69,13 @@ export default {
   box-sizing: border-box;
 }
 .box {
-  $left: 300px;
+  $left: 146px;
   $right: 500px;
   &-left {
     width: $left;
   }
   &-main {
-    padding: 20px;
+    padding: 10px 0;
     width: calc(100% - #{$left} - #{$right});
     height: 100%;
   }
@@ -77,4 +83,7 @@ export default {
     width: $right;
   }
 }
+.fullHeight {
+  height: 100%;
+}
 </style>

src/views/dataChart/privateChart/privateChartEditParams.vue

@@ -1,27 +1,40 @@
 <template>
   <div class="content">
     <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" class="fullHeigh">
-      <el-tab-pane label="参数配置" name="first">
-        <p v-for="i in 50" :key="i">参数配置</p>
+      <el-tab-pane label="数据读取" name="first">
+        <PrivateChartEditParamsData @change="onRender"></PrivateChartEditParamsData>
       </el-tab-pane>
-      <el-tab-pane label="快速咨询" name="second">快速咨询</el-tab-pane>
+      <el-tab-pane label="参数配置" name="second">
+        <PrivateChartEditParamsConfig @change="onChangeConfig"></PrivateChartEditParamsConfig>
+      </el-tab-pane>
+      <el-tab-pane label="AI查询" name="third">AI查询</el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
 // 数据模块
+import PrivateChartEditParamsData from './privateChartEditParamsData.vue'
+import PrivateChartEditParamsConfig from './privateChartEditParamsConfig.vue'
 export default {
   name: 'privateChartEditParams',
+  components: {
+    PrivateChartEditParamsConfig,
+    PrivateChartEditParamsData
+  },
   data () {
     return {
       activeName: 'first'
     }
   },
   methods: {
-    handleClick (tab, event) {
-      console.log(tab, event)
-    }
+    onRender (v) {
+      this.$emit('render', v)
+    },
+    onChangeConfig (v) {
+      this.$emit('render:config', v)
+    },
+    handleClick () {}
   }
 }
 </script>
@@ -37,5 +50,11 @@ export default {
 ::v-deep .el-tabs__content {
   height: calc(100% - 40px);
   overflow: auto;
+  box-sizing: border-box;
+}
+
+::v-deep .el-tabs--border-card {
+  box-shadow: unset;
+  border-color: #EBEEF5;
 }
 </style>

src/views/dataChart/privateChart/privateChartEditParamsConfig.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-tabs v-model="configActive">
+    <el-tab-pane label="横轴配置" name="x">
+      <el-checkbox-group v-model="checkboxGroupX" @change="onRender">
+        <div
+          v-for="item in checkItems"
+          :key="item.value"
+          class="pa-3"
+        >
+          <el-checkbox :label="item.value">{{ item.name }}</el-checkbox>
+        </div>
+      </el-checkbox-group>
+    </el-tab-pane>
+    <el-tab-pane label="纵轴配置" name="y">
+      <el-checkbox-group v-model="checkboxGroupY" @change="onRender">
+        <div
+          v-for="item in checkItems"
+          :key="item.value"
+          class="pa-3"
+        >
+          <el-checkbox :label="item.value">{{ item.name }}</el-checkbox>
+        </div>
+      </el-checkbox-group>
+    </el-tab-pane>
+    <el-tab-pane label="其他配置"></el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  name: 'privateChartEditParamsConfig',
+  data () {
+    return {
+      configActive: 'x',
+      checkboxGroupX: [],
+      checkboxGroupY: [],
+      checkItems: []
+    }
+  },
+  created () {
+    this.onGetConfig()
+  },
+  methods: {
+    onRender (v) {
+      this.$emit('change', {
+        x: this.checkboxGroupX,
+        y: this.checkboxGroupY
+      })
+    },
+    onGetConfig () {
+      const arr = [{
+        name: '机构名称',
+        value: 'organizationName'
+      }, {
+        name: '积分',
+        value: 'integral'
+      }, {
+        name: '职务',
+        value: 'postName'
+      }, {
+        name: '绩效',
+        value: 'performance'
+      }, {
+        name: '姓名',
+        value: 'employeeName'
+      }]
+      this.checkItems = arr
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/dataChart/privateChart/privateChartEditParamsData.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <m-form :items="formItems" v-model="formValues" label-width="80px">
+      <template #dataView>
+        <m-table
+          card-title="数据预览"
+          shadow="never"
+          :items="items"
+          :headers="headers"
+        >
+          <template #card-tools>
+            <m-button size="mini" type="orange" @click="onPreview">预览</m-button>
+          </template>
+        </m-table>
+      </template>
+      <template #filterView>
+        条件检索
+      </template>
+    </m-form>
+    <m-dialog ref="dialog" title="数据预览" append-to-body>
+      <m-table
+        clearHeader
+        shadow="never"
+        :items="items"
+        :headers="headers"
+      ></m-table>
+    </m-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'privateChartEditParamsData',
+  data () {
+    return {
+      formValues: {
+        dataSource: null
+      },
+      formItems: [
+        {
+          label: '数据源',
+          prop: 'dataSource',
+          type: 'select',
+          options: {
+            filterable: true,
+            items: [
+              { label: '花名册', value: 'roster' },
+              { label: '机构人员', value: 'organizationAndEmployee' },
+              { label: '机构人员(带职务)', value: 'organizationAndEmployeeWithPost' },
+              { label: '机构人员(带职务和绩效)', value: 'organizationAndEmployeeWithPostAndPerformance' }
+            ]
+          },
+          handles: {
+            change: this.onChange
+          }
+        },
+        {
+          label: '条件筛选',
+          prop: 'filterView'
+        },
+        {
+          label: '数据预览',
+          prop: 'dataView'
+        }
+      ],
+      items: [],
+      headers: [
+        {
+          label: '字段名称',
+          prop: 'fieldName'
+        },
+        {
+          label: '字段类型',
+          prop: 'fieldType'
+        },
+        {
+          label: '字段描述',
+          prop: 'fieldDesc'
+        }
+      ]
+    }
+  },
+  methods: {
+    onChange () {
+      this.$emit('change', this.getValues())
+    },
+    getValues () {
+      return [
+        { organizationName: '遂溪支行', organizationNo: '123', postName: '经理', employeeName: '张三', employeeNo: '123', performance: 5000, integral: 600 },
+        { organizationName: '赤坎支行', organizationNo: '123123', postName: '前台经理', employeeName: '李四', employeeNo: '123123', performance: 3500, integral: 956 },
+        { organizationName: '霞山支行', organizationNo: '54612', postName: '柜员', employeeName: '王五', employeeNo: '123123', performance: 2000, integral: 456 },
+        { organizationName: '麻章支行', organizationNo: '7478415', postName: '柜员', employeeName: '赵六', employeeNo: '6846', performance: 200, integral: 56 },
+        { organizationName: '开发区支行', organizationNo: '54612', postName: '柜员', employeeName: '钱七', employeeNo: '123123', performance: 2000, integral: 456 }
+      ]
+    },
+    onPreview () {
+      this.$refs.dialog.open()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/dataChart/privateChart/privateChartEditType.vue

@@ -22,6 +22,9 @@ export default {
       Charts
     }
   },
+  created () {
+    this.onChange(this.Charts.bar, 'bar')
+  },
   methods: {
     onChange (data, key) {
       this.$emit('change', key, data)