feature:000.000.004:前端完成图表管理的页面优化和功能实现;

图表管理实现预览生成的图表和分析结论;
完善用户管理页面的展示ICON;

BI_front/src/components/userTable.vue

@@ -1,44 +0,0 @@
-<template>
-  <el-table :data="tableData" style="width: 100%">
-    <el-table-column prop="id" label="用户ID" width="180"></el-table-column>
-    <el-table-column prop="userAccount" label="用户账号" width="180"></el-table-column>
-    <el-table-column prop="userName" label="用户名称"></el-table-column>
-    <el-table-column prop="userAvatar" label="用户头像"></el-table-column>
-    <el-table-column prop="userRole" label="用户角色"></el-table-column>
-    <el-table-column prop="createTime" label="创建时间"></el-table-column>
-    <el-table-column prop="updateTime" label="更新时间"></el-table-column>
-    <el-table-column label="操作">
-      <template #default="scope">
-        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      // tableData: []
-    };
-  },
-  props:["tableData"],
-  methods: {
-    handleEdit(index, row) {
-      this.$emit('edit', row);
-    },
-    handleDelete(index, row) {
-      this.$emit('delete', row);
-    }
-  },
-  computed:{
-    tableData() {
-      return this.tableData;
-    }
-  },
-  updated() {
-    console.log(this.tableData);
-  }
-};
-</script>

BI_front/src/views/chartManage.vue

@@ -18,8 +18,22 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" size="mini" @click="handleQuery">
+          <template #icon>
+            <el-icon><Search /></el-icon>
+          </template>
+          <template #default>
+            搜索
+          </template>
+        </el-button>
+        <el-button size="mini" @click="resetQuery">
+          <template #icon>
+            <el-icon><RefreshRight /></el-icon>
+          </template>
+          <template #default>
+            重置
+          </template>
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -34,25 +48,33 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-button
+              type="primary"
               size="mini"
               @click="handleUpdate(scope.row)"
           >
             <template #icon>
-              <el-icon-edit/>
+              <el-icon><TrendCharts /></el-icon>
             </template>
-            修改
+            详情
           </el-button>
           <el-popconfirm
-              confirm-button-text="Yes"
-              cancel-button-text="No"
+              confirm-button-text="确定"
+              cancel-button-text="取消"
               :icon="InfoFilled"
               icon-color="#626AEF"
-              title="Are you sure to delete this?"
+              title="确定删除这个分析的图表结果吗"
               @confirm="handleDelete(scope.row)"
               @cancel="cancelEvent"
           >
             <template #reference>
-              <el-button>Delete</el-button>
+              <el-button type="danger">
+                <template #icon>
+                  <el-icon><Remove /></el-icon>
+                </template>
+                <template #default>
+                  删除
+                </template>
+              </el-button>
             </template>
           </el-popconfirm>
         </template>
@@ -70,21 +92,45 @@
         @current-change="getList"
     />
 
-    <!-- 添加或修改图表管理对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+    <!-- 显示图表和结论详情的对话框 -->
+    <el-dialog v-model="open" width="60%" center append-to-body>
+      <template #header>数据分析详情</template>
+      <template #default>
+        <el-row>
+          <el-col :span="12">
+            <el-card>
+              <template #header>数据图表</template>
+              <template #default>
+                <div ref="chart" style="height:50vh"/>
+              </template>
+            </el-card>
+          </el-col>
+          <el-col :span="12">
+            <el-card>
+              <template #header>分析结论</template>
+              <template #default>
+                <div style="height:50vh">
+                  <el-text type="primary" size="large" style="margin-top: 20px">
+                    {{analysisConclusion}}
+                  </el-text>
+                </div>
+              </template>
+            </el-card>
+          </el-col>
+        </el-row>
+      </template>
+      <template #footer class="dialog-footer">
+
+      </template>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { listChart, getChart, delChart, addChart, updateChart } from "@/common/api/chart";
+import { listChart, delChart } from "@/common/api/chart";
 import {ElMessage} from "element-plus";
+import * as echarts from 'echarts';
+
 
 export default {
   name: "Chart",
@@ -104,24 +150,49 @@ export default {
       total: 0,
       // 图表管理表格数据
       chartList: [],
-      // 弹出层标题
-      title: "",
       // 是否显示弹出层
       open: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 5,
+        pageSize: 10,
         name: null,
         analysisTarget: null,
         chartType: null,
         userId: null,
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      }
+      //图表的配置对象
+      option:{
+        xAxis: {
+          type: 'category',
+          data: ['2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
+          boundaryGap: true,
+          axisLabel:{
+            interval:0,
+            rotate : 50
+          },
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          name:'增长人数',
+          type:'line',
+          data:[34.0, 34.0, 3.0, 3.0, 43.0, 34.0, 43.0, 34.0, 34.0, 12.0, 12.0, 12.0, 12.0, 32.0, 12.0, 32.0, 32.0, 32.0, 32.0],
+          markPoint: {
+            data: [
+              {type: 'max', name: '最大值'},
+              {type: 'min', name: '最小值'}
+            ]
+          },
+          markLine: {data: [
+              {type: 'average', name: '平均值'}
+            ]},
+          smooth: true
+        }]
+      },
+      analysisConclusion:'',
+      chart:undefined
     };
   },
   created() {
@@ -134,7 +205,6 @@ export default {
       listChart(this.queryParams).then(response => {
         this.chartList = response.data.records;
         this.total = response.data.total;
-        console.log(this.total)
         this.loading = false;
       });
     },
@@ -176,41 +246,20 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加图表管理";
-    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids
-      getChart(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改图表管理";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateChart(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addChart(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
+      this.analysisConclusion = row.analysisConclusion;
+      let generatedChartData = row.generatedChartData;
+      let optionJson = eval("(" +generatedChartData+ ")");
+      //返回格式不稳定,有可能会多封装一层option,需要判断一下
+      if (optionJson.option === undefined || optionJson.option === null){
+        this.option = optionJson;
+      }else{
+        this.option = optionJson.option;
+      }
+      this.open = true;
+      this.refreshChart();
     },
     /** 删除按钮操作 */
     handleDelete(row) {
@@ -241,6 +290,18 @@ export default {
       //   this.$modal.msgSuccess("删除成功");
       // }).catch(() => {});
     },
+    //更新图表
+    refreshChart(){
+      setTimeout(()=>{
+        if (this.chart === undefined){
+          this.chart = echarts.init(this.$refs.chart);
+        }
+        this.chart.clear();
+        setTimeout(()=>{
+          this.chart.setOption(this.option);
+        },500)
+      },500);
+    }
   }
 };
 </script>

BI_front/src/views/generateChart.vue

@@ -67,7 +67,6 @@
 <script>
 import {generateChartByAI} from "../common/api/chart/index.js";
 import {ElMessage} from "element-plus";
-import {ref} from "vue";
 import * as echarts from 'echarts';
 
 export default {
@@ -169,11 +168,9 @@ export default {
             this.analysisConclusion = res.data.analysisConclusion;
             //取出配置对象的代码
             let generatedChartData = res.data.generatedChartData;
-            let option = generatedChartData;
             //将配置对象的代码转换为JSON对象,不是不是标准的JSON对象,需要使用eval函数进行转换
             // let optionJson = JSON.parse(option);
             let optionJson = eval("(" +generatedChartData+ ")")
-            console.log(optionJson)
             //返回格式不稳定,有可能会多封装一层option,需要判断一下
             if (optionJson.option === undefined || optionJson.option === null){
               this.option = optionJson;

BI_front/src/views/myChart.vue

@@ -1,13 +1,299 @@
 <template>
-我的图表
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="图表名称" prop="name">
+        <el-input
+            v-model="queryParams.name"
+            placeholder="请输入图表名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="mini" @click="handleQuery">
+          <template #icon>
+            <el-icon><Search /></el-icon>
+          </template>
+          <template #default>
+            搜索
+          </template>
+        </el-button>
+        <el-button size="mini" @click="resetQuery">
+          <template #icon>
+            <el-icon><RefreshRight /></el-icon>
+          </template>
+          <template #default>
+            重置
+          </template>
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="chartList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="图表ID" align="center" prop="id" />
+      <el-table-column label="图表名称" align="center" prop="name" />
+      <el-table-column label="分析目标" align="center" prop="analysisTarget" />
+      <el-table-column label="图标类型" align="center" prop="chartType" />
+      <!--<el-table-column label="生成的分析结论" align="center" prop="analysisConclusion" />-->
+      <el-table-column label="创建用户ID" align="center" prop="userId" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+              type="primary"
+              size="mini"
+              @click="handleUpdate(scope.row)"
+          >
+            <template #icon>
+              <el-icon><TrendCharts /></el-icon>
+            </template>
+            详情
+          </el-button>
+          <el-popconfirm
+              confirm-button-text="确定"
+              cancel-button-text="取消"
+              :icon="InfoFilled"
+              icon-color="#626AEF"
+              title="确定删除这个分析的图表结果吗"
+              @confirm="handleDelete(scope.row)"
+              @cancel="cancelEvent"
+          >
+            <template #reference>
+              <el-button type="danger">
+                <template #icon>
+                  <el-icon><Remove /></el-icon>
+                </template>
+                <template #default>
+                  删除
+                </template>
+              </el-button>
+            </template>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+        v-show="total>0"
+        v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize"
+        :page-sizes="[10, 15, 30]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="getList"
+        @current-change="getList"
+    />
+
+    <!-- 显示图表和结论详情的对话框 -->
+    <el-dialog v-model="open" width="60%" center append-to-body>
+      <template #header>数据分析详情</template>
+      <template #default>
+        <el-row>
+          <el-col :span="12">
+            <el-card>
+              <template #header>数据图表</template>
+              <template #default>
+                <div ref="chart" style="height:50vh"/>
+              </template>
+            </el-card>
+          </el-col>
+          <el-col :span="12">
+            <el-card>
+              <template #header>分析结论</template>
+              <template #default>
+                <div style="height:50vh">
+                  <el-text type="primary" size="large" style="margin-top: 20px">
+                    {{analysisConclusion}}
+                  </el-text>
+                </div>
+              </template>
+            </el-card>
+          </el-col>
+        </el-row>
+      </template>
+      <template #footer class="dialog-footer">
+
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-export default {
-  name: "myChart"
-}
-</script>
+import { listChart, delChart } from "@/common/api/chart";
+import {ElMessage} from "element-plus";
+import * as echarts from 'echarts';
 
-<style scoped>
 
-</style>
+export default {
+  name: "myChart",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 图表管理表格数据
+      chartList: [],
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        analysisTarget: null,
+        chartType: null,
+        userId: null,
+      },
+      //图表的配置对象
+      option:{
+        xAxis: {
+          type: 'category',
+          data: ['2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
+          boundaryGap: true,
+          axisLabel:{
+            interval:0,
+            rotate : 50
+          },
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          name:'增长人数',
+          type:'line',
+          data:[34.0, 34.0, 3.0, 3.0, 43.0, 34.0, 43.0, 34.0, 34.0, 12.0, 12.0, 12.0, 12.0, 32.0, 12.0, 32.0, 32.0, 32.0, 32.0],
+          markPoint: {
+            data: [
+              {type: 'max', name: '最大值'},
+              {type: 'min', name: '最小值'}
+            ]
+          },
+          markLine: {data: [
+              {type: 'average', name: '平均值'}
+            ]},
+          smooth: true
+        }]
+      },
+      analysisConclusion:'',
+      chart:undefined
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询图表管理列表 */
+    getList() {
+      this.loading = true;
+      listChart(this.queryParams).then(response => {
+        this.chartList = response.data.records;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        analysisTarget: null,
+        chartData: null,
+        chartType: null,
+        generatedChartData: null,
+        analysisConclusion: null,
+        userId: null,
+        createdTime: null,
+        updatedTime: null,
+        deleteFlag: null
+      };
+      // this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      // this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.analysisConclusion = row.analysisConclusion;
+      let generatedChartData = row.generatedChartData;
+      let optionJson = eval("(" +generatedChartData+ ")");
+      //返回格式不稳定,有可能会多封装一层option,需要判断一下
+      if (optionJson.option === undefined || optionJson.option === null){
+        this.option = optionJson;
+      }else{
+        this.option = optionJson.option;
+      }
+      this.open = true;
+      this.refreshChart();
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      delChart(ids).then(res => {
+        if (res.code === 200) {
+          ElMessage({
+            message: '删除成功',
+            type: 'success'
+          })
+        }else {
+          ElMessage({
+            message: res.msg,
+            type: 'error'
+          })
+        }
+        this.getList();
+      }).error(err => {
+        ElMessage({
+          message: 'err',
+          type: 'error'
+        })
+      });
+      // this.$modal.confirm('是否确认删除图表管理编号为"' + ids + '"的数据项？').then(function() {
+      //   return delChart(ids);
+      // }).then(() => {
+      //   this.getList();
+      //   this.$modal.msgSuccess("删除成功");
+      // }).catch(() => {});
+    },
+    //更新图表
+    refreshChart(){
+      setTimeout(()=>{
+        if (this.chart === undefined){
+          this.chart = echarts.init(this.$refs.chart);
+        }
+        this.chart.clear();
+        setTimeout(()=>{
+          this.chart.setOption(this.option);
+        },500)
+      },500);
+    }
+  }
+};
+</script>

BI_front/src/views/userManage.vue

@@ -30,8 +30,22 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" size="mini" @click="handleQuery">
+          <template #icon>
+            <el-icon><Search /></el-icon>
+          </template>
+          <template #default>
+            搜索
+          </template>
+        </el-button>
+        <el-button size="mini" @click="resetQuery">
+          <template #icon>
+            <el-icon><RefreshRight /></el-icon>
+          </template>
+          <template #default>
+            重置
+          </template>
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -40,33 +54,48 @@
         <el-button
             type="primary"
             plain
-            icon="el-icon-plus"
             size="mini"
             @click="handleAdd"
-            v-hasPermi="['system:user:add']"
-        >新增</el-button>
+        >
+          <template #icon>
+            <el-icon><Plus /></el-icon>
+          </template>
+          <template #default>
+            新增
+          </template>
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
             type="success"
             plain
-            icon="el-icon-edit"
             size="mini"
             :disabled="single"
             @click="handleUpdate"
-            v-hasPermi="['system:user:edit']"
-        >修改</el-button>
+        >
+          <template #icon>
+            <el-icon><Edit /></el-icon>
+          </template>
+          <template #default>
+            修改
+          </template>
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
             type="danger"
             plain
-            icon="el-icon-delete"
             size="mini"
             :disabled="multiple"
             @click="handleDelete"
-            v-hasPermi="['system:user:remove']"
-        >删除</el-button>
+        >
+          <template #icon>
+            <el-icon><Remove /></el-icon>
+          </template>
+          <template #default>
+            删除
+          </template>
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -81,6 +110,7 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-button
+              type="primary"
               size="mini"
               @click="handleUpdate(scope.row)"
           >
@@ -88,24 +118,18 @@
               <el-icon-edit/>
             </template>
             修改</el-button>
-          <!--<el-button-->
-          <!--    size="mini"-->
-          <!--    type="text"-->
-          <!--    icon="el-icon-delete"-->
-          <!--    @click="handleDelete(scope.row)"-->
-          <!--&gt;删除</el-button>-->
 
           <el-popconfirm
-              confirm-button-text="Yes"
-              cancel-button-text="No"
+              confirm-button-text="确定"
+              cancel-button-text="取消"
               icon-color="#626AEF"
-              title="Are you sure to delete this?"
+              title="确定删除这个用户吗?"
               @confirm="handleDelete(scope.row)"
               @cancel="cancelEvent"
           >
             <InfoFilled/>
             <template #reference>
-              <el-button>Delete</el-button>
+              <el-button type="danger">删除</el-button>
             </template>
           </el-popconfirm>
         </template>