修改数据可视化代码目录

web/src/api/data.js

@@ -121,4 +121,12 @@ export function createProject(params) {
       params
 
   })
-}
+}
\ No newline at end of file
+
+export function login(params) {
+  return request({
+    url: "http://localhost:9091/AuthenticationManager/oauth/token",
+    method: 'post',
+    params
+  })
+}

web/src/router/index.js

@@ -123,21 +123,12 @@ export const asyncRoutes = [
       {
         path: '/data',
         name: 'data',
-        component: () => import('@/views/data'),
+        component: () => import('@/views/chartcustomization'),
         meta: {
           title: '数据可视化分析',
           icon: 'hand-middle-finger',
         },
       },
-      {
-        path: 'analysis',
-        name: 'analysis',
-        hidden: true,
-        component: () => import('@/views/data/components/analysis'),
-        meta: {
-          title: '数据'
-        },
-      },
     ],
   },
 
@@ -230,7 +221,7 @@ export const asyncRoutes = [
       },
     ],
   },
-  
+
   {
     path: '*',
     redirect: '/404',

web/src/chartcustomization/chartedit.vue → web/src/views/chartcustomization/chartedit.vue

@@ -40,13 +40,13 @@
 
 <script>
 
-    import ChartDataZoom from "./chartConfg/chartDataZoom";
-    import ChartTitle from "./chartConfg/chartTitle";
-    import ChartLegend from "./chartConfg/chartLegend";
-    import ChartXAxis from "./chartConfg/chartXAxis";
-    import ChartYAxis from "./chartConfg/chartYAxis";
-    import ChartPoint from "./chartConfg/chartPoint";
-    import ChartLine from "./chartConfg/chartLine";
+    import ChartDataZoom from "./chartConfg/chartDataZoom.vue";
+    import ChartTitle from "./chartConfg/chartTitle.vue";
+    import ChartLegend from "./chartConfg/chartLegend.vue";
+    import ChartXAxis from "./chartConfg/chartXAxis.vue";
+    import ChartYAxis from "./chartConfg/chartYAxis.vue";
+    import ChartPoint from "./chartConfg/chartPoint.vue";
+    import ChartLine from "./chartConfg/chartLine.vue";
     export default {
       name: "chartedit",
       components: {ChartLine, ChartPoint, ChartYAxis, ChartXAxis, ChartLegend, ChartTitle, ChartDataZoom},

web/src/views/chartcustomization/components/chart.vue

+<template>
+  <div class="index-container" style="display: flex; padding-top: 20px;
+    justify-content: center;
+    overflow: scroll;
+    position: relative;
+    background: #fbfbfb;">
+    <div ref="chart" class="chart project" style="min-height: 800px;"></div>
+    <chartedit></chartedit>
+  </div>
+
+</template>
+<script>
+  import { mapState }  from 'vuex';
+  import { getProject, getFileList, createProject } from '@/api/data'
+  import * as echarts from 'echarts';
+  import Chartedit from "../chartedit.vue";
+  export default {
+    name: 'project',
+    components: {Chartedit},
+    data() {
+      return {
+        myChart:null,
+
+      }
+    },
+
+    mounted() {
+      this.init()
+    },
+    watch:{
+      chartSettingsTitle: {
+        deep: true,
+        handler: 'init' // 直接将方法名指定为 handler
+      },
+      chartSettingsLegend: {
+        deep: true,
+        handler: 'init' // 直接将方法名指定为 handler
+      },
+      chartSettingsXAxis:{
+        deep: true,
+        handler: 'init' // 直接将方法名指定为 handler
+      },
+      chartSettingsSeries:{
+        deep: true,
+        handler: 'init' // 直接将方法名指定为 handler
+      },
+      chartSettingsDataZoom:{
+        deep: true,
+        handler: 'init' // 直接将方法名指定为 handler
+      },
+    },
+    computed: {
+      ...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom']),
+    },
+    methods: {
+      addPointSetting(series){
+        for (var i = 0; i < series.length; i++) {
+          for (var key in this.chartSettingsSeries) {
+            series[i][key] = this.chartSettingsSeries[key];
+          }
+        }
+      },
+      addLineSetting(series){
+        for (var i = 0; i < series.length; i++) {
+          for (var key in this.chartSettingsSeries) {
+            if(key=="smooth" || key == "lineStyle"){
+              series[i][key] = this.chartSettingsSeries[key];
+            }
+          }
+        }
+      },
+      init(){
+
+        let that = this
+        this.myChart = echarts.init(this.$refs.chart)
+        const setOption={};
+        setOption.title = this.chartSettingsTitle
+        setOption.legend = this.chartSettingsLegend
+        setOption.xAxis = this.chartSettingsXAxis
+        setOption.yAxis = this.chartSettingsYAxis
+        setOption.xAxis.data=['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        setOption.dataZoom = this.chartSettingsDataZoom
+
+        setOption.series= [
+          {
+            name: 'Email',
+            type: 'line',
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: 'Union Ads',
+            type: 'line',
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+          {
+            name: 'Video Ads',
+            type: 'line',
+            data: [150, 232, 201, 154, 190, 330, 410]
+          },
+          {
+            name: 'Direct',
+            type: 'line',
+            data: [320, 332, 301, 334, 390, 330, 320]
+          },
+          {
+            name: 'Search Engine',
+            type: 'line',
+            stack: 'Total',
+            data: [820, 932, 901, 934, 1290, 1330, 1320]
+          }]
+        if(this.chartSettingsSeries.showPoint==true){
+          this.addPointSetting(setOption.series)
+        }else {
+          for(var i in setOption.series){
+            setOption.series[i].symbol = "none"
+          }
+        }
+        this.addLineSetting(setOption.series)
+
+        this.myChart.setOption(setOption);
+        window.addEventListener("resize", () => {
+          this.myChart.resize();
+        });
+      }
+    }
+  }
+
+</script>
+
+<style scoped>
+  .index-container {
+    height: 100%;
+  }
+
+  .proName:hover {
+    cursor: pointer;
+    color: rgb(255, 121, 11);
+  }
+
+  .project {
+    width:80%;
+    background-color:white;
+  }
+
+  .project .head {
+      width: 100%;
+      height: 50px;
+      line-height: 50px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      border-bottom: 1px solid #ebebeb;
+  }
+
+  .project .head .title {
+   width: 300px;
+   margin-left: 30px;
+   font-weight: 600;
+   font-size: 18px;
+  }
+
+  .project .head .btn {
+    margin-right: 20px;
+  }
+
+  .project .pro .entry {
+    height: 150px;
+    margin: 20px;
+    border-radius: 3px;
+    display: flex;
+    border-bottom: 1px solid rgb(236, 236, 236);
+  }
+
+  .project .pro .entry:hover {
+    background: rgb(238, 238, 238);
+    cursor: pointer;
+  }
+
+  .project .pro .entry .p-icon {
+    width: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .project .pro .entry .p-icon img {
+    width: 60px;
+    height: 47px;
+  }
+
+  .project .pro .entry .p-content {
+    flex:1;
+    padding: 10px 40px;
+  }
+  .project .pro .entry .p-content .title{
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .project .pro .entry .p-content .body{
+    height: 50px;
+    line-height: 50px;
+  }
+  .project .pro .entry .p-content .footer{
+    height: 50px;
+    line-height: 50px;
+    text-align: right;
+  }
+</style>

web/src/views/chartcustomization/index.vue

+<template>
+  <div class="index-container" >
+    <div style="width:100%;height:100%;display:flex;flex-direction: column;">
+      <!-- <div style="height:56px;border-bottom:1px solid #e1e1e1c4;display: flex;flex-direction: row;">
+          <div style="display: flex; flex-direction: row;">
+              <template v-for="item in tabHead" >
+                  <div class="tab-entry" @click="choseTab(item)">
+                      <span>{{item.title}}</span>
+                  </div>
+              </template>
+          </div>
+          <div style="height: 56px;position: absolute;right: 50px;line-height: 56px;">
+            <el-button>新建分析项目</el-button>
+          </div>
+      </div> -->
+      <component :is="activateTab.component"></component>
+    </div>
+  </div>
+</template>
+<script>
+  import project from "./components/chart.vue"
+  export default {
+
+    name: 'Index',
+    components: { project },
+    data() {
+      return {
+        activateTab: {
+            "key": "project",
+            "component": "project"
+        },
+        tabHead: [
+            {
+                "title": "分析项目",
+                "key": "project",
+                "component": "project"
+            },
+        ]
+      }
+    },
+    mounted() {
+
+
+    },
+    methods: {
+        choseTab(item) {
+            this.activateTab = item;
+        }
+    }
+  }
+</script>
+
+<style scoped>
+.index-container {
+    height: 100%;
+}
+.tab-entry {
+    line-height:56px;
+    width:120px;
+    font-size:17px;
+    text-align: center;
+}
+/* .tab-entry:hover {
+    cursor: pointer;
+    color: #005766;
+} */
+.active-entry {
+    color: #007286;
+}
+</style>

web/src/views/data/components/analysis.vue

@@ -36,12 +36,12 @@
           </div>
         </div>
       </div>
-      <div  style="flex: 1; display: flex; flex-direction: row;" v-if="selectAlgo.id && !hasResult">
+      <div  style="flex: 1; display: flex; flex-direction: row; overflow: auto;" v-if="selectAlgo.id && !hasResult">
         <div class="sel-args" style="width: 240px;border-right: 3px solid #d7d7d754;">
           <div class="title">
             <span style="margin-left: 14px;">选择变量</span>
           </div>
-          <div class="body">
+          <div class="body" >
 
             <!-- 调用组件  -->
             <draggable v-model="args" v-bind="{sort: false}" :group="{ name:'person', pull: true, put:false }"
@@ -87,6 +87,16 @@
                     </div>
                 </draggable>
               </div>
+              <div style="height:40px;line-height:40px;margin-left: 20px;">放入索引项 [定类] 变量（变量数≤1）</div>
+              <div style="width: 95%;height: 10%; ;border:1px dashed #cdcdcd;overflow-y: auto;margin-left: 20px;position: relative;">
+                <draggable class="mdc_right" :group="{name:'person'}" v-model="choose_args3" @start="dragItem"
+                           @add="addItem">
+                  <div v-for="(item,index) in choose_args3" v-bind:key="index" style="display: flex;position: relative;">
+                    <div><span style="margin-left:20px">{{item.name}}</span></div>
+                    <div class="del-entry" style="position: absolute;right: 10px;" @click="delEntry3(item)"><i class="el-icon-circle-close"></i></div>
+                  </div>
+                </draggable>
+              </div>
             </div>
           </div>
         </div>
@@ -147,6 +157,7 @@
         choose_args: [],
         choose_args1: [],
         choose_args2: [],
+        choose_args3: [],
         args: [{
             "id": "1",
             "name": "时间",
@@ -510,17 +521,19 @@
         })
       },
       runDEA() {
+        //this.choose_args1 = {aa:'aaa'}
         let params = {
-          "name": this.project.fileName,
+          "name": this.project.name,
           "fId": this.project.fId,
           "args_x": JSON.stringify(this.choose_args1),
-          "args_y": JSON.stringify(this.choose_args2)
+          "args_y": JSON.stringify(this.choose_args2),
+          "args_z": JSON.stringify(this.choose_args3),
         }
         runDEAAlgo(params).then(res => {
           console.log("算法执行结果")
           console.log(res)
           this.hasResult = true
-          this.algoRes = res.data;
+          this.algoRes = {title: "数据包络分析(DEA)_编号_身高cm_负荷时间"}//res.data;
         }).catch(err => {
           console.log(err)
         })
@@ -555,6 +568,12 @@
         })
         this.args.push(item)
       },
+      delEntry3(item) {
+        this.choose_args3 = this.choose_args3.filter(i => {
+          return i.name != item.name
+        })
+        this.args.push(item)
+      },
       delEntry(item) {
         this.choose_args = this.choose_args.filter(i => {
             return i.name != item.name

web/src/views/data/index.vue

@@ -55,7 +55,7 @@
     height: 100%;
 }
 .tab-entry {
-    line-height:56px; 
+    line-height:56px;
     width:120px;
     font-size:17px;
     text-align: center;
@@ -67,4 +67,4 @@
 .active-entry {
     color: #007286;
 }
-</style>
+</style>
\ No newline at end of file