Skip to content

Z
ZZDataAnalysis
Commit 9cfdd002 authored by whlviolin's avatar whlviolin
Browse files
Options

修改数据可视化代码目录

parent 7a06d7a4
Show whitespace changes
Inline Side-by-side
Showing with 535 additions and 214 deletions
web/src/api/data.js
View file @ 9cfdd002
......@@ -122,3 +122,11 @@ export function createProject(params) {
})
}
export function login(params) {
return request({
url: "http://localhost:9091/AuthenticationManager/oauth/token",
method: 'post',
params
})
}
web/src/router/index.js
View file @ 9cfdd002
......@@ -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: '数据'
},
},
],
},
......
web/src/chartcustomization/chartedit.vue → web/src/views/chartcustomization/chartedit.vue
View file @ 9cfdd002
......@@ -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 0 → 100644
View file @ 9cfdd002
<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 0 → 100644
View file @ 9cfdd002
<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
View file @ 9cfdd002
......@@ -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/components/project.vue
View file @ 9cfdd002
<template>
<div class="index-container" style="display: flex; padding-top: 20px;
<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 class="project" style="position:absolute">
<div class="head">
<div class="title">分析项目</div>
<div class="btn" @click="goCreate"><el-button>新建分析项目</el-button></div>
</div>
<div class="pro" v-for="item in projectList" >
<div class="entry" @click="showData(item)">
<div class="p-icon">
<img src="@/assets/img/project.png"/>
<div>项目</div>
</div>
<div class="p-content">
<div class="title"> {{item.name}}</div>
<div class="body">
使用的数据： {{item.fileName}}
</div>
<div class="footer">
{{item.updateTime}}
</div>
</div>
</div>
</div>
</div>
<el-dialog
title="创建分析项目"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<div style="margin:8px"><span>输入项目名称</span></div>
<el-input :style="{'width': '60%'}" v-model="projectName" placeholder="请输入内容"></el-input>
<div style="margin:8px"><span>选择分析的数据文件</span></div>
<el-select v-model="chooseFile" clearable placeholder="请选择">
<el-option
v-for="item in fileList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="createProject">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { mapState } from 'vuex';
import { getProject, getFileList, createProject } from '@/api/data'
import * as echarts from 'echarts';
import Chartedit from "../../../chartcustomization/chartedit";
export default {
name: 'project',
components: {Chartedit},
import { getProject, getFileList, createProject } from '@/api/data'
export default {
name: 'project1',
data() {
return {
myChart:null,
dialogVisible: false,
chooseFile: '',
projectName: '',
projectList: [
// {
// "id": "123",
// "name": "人口分析",
// "fId": "124",
// "fileName": "人口.csv",
// "type": "csv",
// "updateTime": "2023-05-22 10:10:10"
// },{
// "id": "123",
// "name": "国民经济分析",
// "fId": "125",
// "fileName": "国民生产总值.csv",
// "type": "csv",
// "updateTime": "2023-05-22 10:10:10"
// },
// {
// "id": "124",
// "name": "GDP",
// "fId": "126",
// "fileName": "GDP.csv",
// "type": "csv",
// "updateTime": "2023-05-22 10:10:10"
// }
],
fileList: []
}
},
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']),
this.initProject();
this.initFileList();
},
methods: {
addPointSetting(series){
for (var i = 0; i < series.length; i++) {
for (var key in this.chartSettingsSeries) {
series[i][key] = this.chartSettingsSeries[key];
}
}
initFileList() {
getFileList().then(res => {
console.log(res)
this.fileList = res.data;
}).catch(err => {
console.log(err)
})
},
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];
}
}
}
initProject() {
getProject().then(res => {
this.projectList = res.data
console.log(res);
}).catch(err=>{
console.log(err)
})
},
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]
showData(row) {
console.log(row)
this.$router.push({
name: "analysis",
query: row
})
},
{
name: 'Union Ads',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
goCreate() {
this.dialogVisible = true;
},
{
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"
createProject() {
if(this.chooseFile == '') {
return;
}
if(this.projectName == '') {
return;
}
this.addLineSetting(setOption.series)
this.myChart.setOption(setOption);
window.addEventListener("resize", () => {
this.myChart.resize();
});
let params = {
fId: this.chooseFile,
name: this.projectName
}
createProject(params).then(res => {
console.log(res)
this.initProject();
this.dialogVisible = false;
}).catch(err=> {
console.log(err);
this.dialogVisible = false;
})
}
}
}
</script>
<style scoped>
.index-container {
.index-container {
height: 100%;
}
}
.proName:hover {
.proName:hover {
cursor: pointer;
color: rgb(255, 121, 11);
}
}
.project {
.project {
width:80%;
background-color:white;
}
}
.project .head {
.project .head {
width: 100%;
height: 50px;
line-height: 50px;
......@@ -150,61 +173,61 @@
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #ebebeb;
}
}
.project .head .title {
.project .head .title {
width: 300px;
margin-left: 30px;
font-weight: 600;
font-size: 18px;
}
}
.project .head .btn {
.project .head .btn {
margin-right: 20px;
}
}
.project .pro .entry {
.project .pro .entry {
height: 150px;
margin: 20px;
border-radius: 3px;
display: flex;
border-bottom: 1px solid rgb(236, 236, 236);
}
}
.project .pro .entry:hover {
.project .pro .entry:hover {
background: rgb(238, 238, 238);
cursor: pointer;
}
}
.project .pro .entry .p-icon {
.project .pro .entry .p-icon {
width: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.project .pro .entry .p-icon img {
}
.project .pro .entry .p-icon img {
width: 60px;
height: 47px;
}
}
.project .pro .entry .p-content {
.project .pro .entry .p-content {
flex:1;
padding: 10px 40px;
}
.project .pro .entry .p-content .title{
}
.project .pro .entry .p-content .title{
height: 50px;
line-height: 50px;
font-size: 16px;
font-weight: 600;
}
.project .pro .entry .p-content .body{
}
.project .pro .entry .p-content .body{
height: 50px;
line-height: 50px;
}
.project .pro .entry .p-content .footer{
}
.project .pro .entry .p-content .footer{
height: 50px;
line-height: 50px;
text-align: right;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment