SheYuWu03
/
front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

graph ui beautified @2024年7月12日 by myz

This commit is contained in:
leap 2024-07-12 11:42:03 +08:00
parent fcd74d0acb
commit 498ec50d96
2 changed files with 107 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

314
src/views/ShowGraph.vue
View File

@ -1,42 +1,39 @@
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
import * as echarts from 'echarts';
<template>
<el-header class = 'containerHead'>
<el-container class = 'h-full bg-blue-100'>
<el-header class = 'containerHead'>
<HeaderPage :pageTitle = 'pageTitle'></HeaderPage>
<el-button class = 'btnReturnHomePage' @click="returnHome">
<el-tooltip content = '返回首页'>
<el-icon><ArrowLeft /></el-icon>
<el-tooltip content = '返回上一级'>
<el-icon><Back /></el-icon>
</el-tooltip>
</el-button>
</el-header>
<el-container>
<div class="container">
<div class="left-grid">
<el-card>
</el-header>
<el-container id = "containerMain">
<div class="left-grid">
<el-card class = 'h-full w-full'>
<!-- 选项栏 -->
<div class="navbar bg-white flex justify-center pt-0">
<span class="text-2xl font-bold pt-0">绘图选项</span>
</div>
<!-- 多元素多性质比较项 -->
<div class = 'rounded-3xl bg-slate-100 shadow-md flex justify-between items-center font-bold pr-7'>
<el-switch
v-model="OpenSelected"
class="ml-2"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
v-model="OpenSelected"
class="ml-2 "
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
/>
<p6 v-show= OpenSelected>启用多元素/多性质比较</p6>
<p6 v-show= !OpenSelected>禁用多元素/多性质比较</p6>
<el-select v-model="Selectedcol" placeholder="Select" style="width: 240px" v-show="OpenSelected">
<el-option
v-for="(item,index) in mycolumns"
:key="index"
:label="item.label"
:value="item.prop"
/>
</el-select>
</div>
<!-- 选择栏 -->
<el-select v-model="Selectedcol" placeholder="Select" style="width: 100%; margin-top: 2%; margin-bottom: 2%" v-show="OpenSelected">
<el-option
v-for="(item,index) in mycolumns"
:key="index"
:label="item.label"
:value="item.prop"
/>
</el-select>
<div v-show = OpenSelected>
<div>
<div style="max-width: 600px; display: flex; flex-direction: row; align-items: center; margin-bottom: 10px;" v-for="(i, index) in SelectedName" :key="index">
@ -47,91 +44,67 @@ import * as echarts from 'echarts';
<div>
<el-input
v-model="SelectNowName"
style="width: 240px"
style="width: 100%; margin-bottom: 2%"
placeholder="输入需要选择的实体名称"
clearable
/>
<el-button type="primary" @click="AddSelectedName">确定</el-button>
<button class="btn btn-accent w-full text-white" @click="AddSelectedName">确定</button>
</div>
</div>
<el-divider />
<el-row>
<el-form>
<div class="demo-select">
<div class="block">
<span class="demonstration">数据可视化</span>
<el-select v-model="selectedEntity" placeholder="选择生成的表格类型" style="width: 400px">
<el-option
v-for="entity in entityOptions"
:key="entity.value"
:label="entity.label"
:value="entity.value"
></el-option>
</el-select>
</div>
<el-divider />
<div class = 'w-full'>
<el-form class = 'w-full'>
<div class="demo-select">
<!-- 选项栏 -->
<div class="navbar bg-white flex justify-center pt-0">
<span class="text-2xl font-bold pt-0">数据可视化类型</span>
</div>
<!-- 动态输入组件 -->
<component
:is="currentComponent"
ref="dynamicComponent"
@change="handlerow"
@update:selectedEntity="handleSelectedEntity"
@update:selectedrow="handleSelectedRow"
@update:selectedChartType="handleSelectedChartType"
@update:selectedrow2="handleSelectedRow2"
@update:selectedrow3="handleSelectedRow3"
@update:selectedcul1="handleUpdateSelectedCul"
@update:selectedcul2="handleUpdateSelectedCul"
@update:selectedcul3="handleUpdateSelectedCul"
:rowOptions="convertedColumns"
:rowOptions2="convertedColumns"
:Message1="SendOpenSelected"
:Message2="SendOpenSelected"
:Message3="SendOpenSelected"
:Message4="SendOpenSelected"
>
</component>
<!-- <el-card v-if="entity">
<el-row>
<el-table
:data="columnData"
:show-header="true"
:max-height="200"
@selection-change="handleSelectionChange"
stripe
>
<el-table-column type="selection" width="55" style="background-color: black;"/>
<el-table-column
prop="name"
label="对象"
header-style="background-color: black; color: white;"
style="text-align: center;">
</el-table-column>
</el-table>
</el-row>
</el-card> -->
<el-form-item>
<el-button type="primary" size="medium" @click="handleGenerateChart">
点击生成图表
</el-button>
</el-form-item>
</el-form>
</el-row>
</el-card>
<el-select v-model="selectedEntity" placeholder="选择生成的表格类型" style="width: 400px; margin-bottom: 2%;">
<el-option
v-for="entity in entityOptions"
:key="entity.value"
:label="entity.label"
:value="entity.value"
></el-option>
</el-select>
</div>
<!-- 动态输入组件 -->
<component
:is="currentComponent"
ref="dynamicComponent"
@change="handlerow"
@update:selectedEntity="handleSelectedEntity"
@update:selectedrow="handleSelectedRow"
@update:selectedChartType="handleSelectedChartType"
@update:selectedrow2="handleSelectedRow2"
@update:selectedrow3="handleSelectedRow3"
@update:selectedcul1="handleUpdateSelectedCul"
@update:selectedcul2="handleUpdateSelectedCul"
@update:selectedcul3="handleUpdateSelectedCul"
:rowOptions="convertedColumns"
:rowOptions2="convertedColumns"
:Message1="SendOpenSelected"
:Message2="SendOpenSelected"
:Message3="SendOpenSelected"
:Message4="SendOpenSelected"
>
</component>
</el-form>
<el-footer class = 'p-0'>
<button class = 'btn text-white w-full btn-accent' @click="handleGenerateChart">
绘图
</button>
</el-footer>
</div>
<div class="right-grid" v-if="hasUpperContent">
<el-button type="danger" @click="clearchart">取消</el-button>
<div ref="chartContainer" class="chart-container"></div>
</div>
<div class="right-grid" v-else> <div ref="chartContainer" class="chart-container"></div> </div>
</div>
</el-card>
</div>
<div class="right-grid" v-if="hasUpperContent">
<button>取消</button>
<div ref="chartContainer" class="chart-container"></div>
</div>
<div class="right-grid" v-else> <div ref="chartContainer" class="chart-container"></div> </div>
</el-container>
</el-container>
</template>
<script>
@ -139,7 +112,6 @@ import * as echarts from 'echarts';
import { ref } from 'vue'
import { markRaw } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
import Entity1Form from '@/components/graph/Entity1Form.vue';
import Entity2Form from '@/components/graph/Entity2Form.vue';
@ -147,8 +119,7 @@ import Entity3Form from '@/components/graph/Entitu3Form.vue';
import Entity4Form from '@/components/graph/Entity4Form.vue';
// import Entity5Form from '@/components/graph//Entity5Form.vue';
import HeaderPage from "@/components/HeaderPage.vue";
import { avatarEmits } from 'element-plus';
import AddDialog from '@/components/components_cluespage/AddDialog.vue';
export default {
components: {
@ -156,7 +127,6 @@ export default {
Entity2Form,
Entity3Form,
Entity4Form,
HeaderPage
},
props: ['columns','tabledata'],
@ -167,7 +137,7 @@ export default {
selectedColumnData:Array,
xz:[],
yz:[],
pageTitle:'图形可视化',
pageTitle:'线索可视化',
mytable:[],
mycolumns:'',
item:[],
@ -196,32 +166,14 @@ export default {
SelectedName: [],
SelectNowName: ref(''),
OpenSelected: ref(false),
OpenSelected: ref(true),
Selectedcol:"",
//传送点
Selectedcul:[],
};
},
// watch: {
// mytable: {
// handler(newVal, oldVal) {
// console.log('mytable changed');
// console.log('New Value:', newVal);
// console.log('Old Value:', oldVal);
// // 在这里可以添加你希望在mytable变化时执行的逻辑
// },
// deep: true // 如果需要深度监听对象内部的变化，可以设置deep为true
// }
// },
computed: {
// entity()
// {
// if (this.selectedEntity=='entity5')
// return 1;
// else
// return 0;
// },
columnData() {
if (this.srow)
{
@ -261,11 +213,8 @@ export default {
},
created()
{
//console.log(this.$route.params.tabledata)
this.mytable=JSON.parse(this.$route.params.tabledata);
this.mycolumns = JSON.parse(this.$route.params.columns);
// console.log('Parsed columns:', this.mycolumns,this.table);
},
methods: {
isValidDate(year, month, day) {
@ -300,80 +249,10 @@ export default {
this.SelectNowName = '';
}
},
// handleSelectionChange(selection) {
// // 在这里处理选择变化，selection 是选中的行数据数组
// let obj=selection.map(item=>item.name)
// // console.log(obj)
// this.selectedColumnData =selection.map(item=>item.name)
// // console.log( this.selectedColumnData);
// // console.log('选择的行数据:', selection);
// },
returnHome(){
window.history.back();
},
// extractThreeColumns(tableData) {
// let extractedData = tableData.map(row => ({
// month: row[this.srow3],
// product: row[this.srow],
// amount: row[this.srow2]
// }));
// return extractedData;
// },
// count_sum_time()
// {
// this.hasUpperContent = true;
// let counts = {};
// let salesData=this.extractThreeColumns(this.mytable);
// // console.log(salesData)
// // 遍历销售记录数组，填充 counts 对象
// salesData.forEach(record => {
// let { month, product, amount } = record;
// let currentMonth=new Date(month)
// let monthKey1 = currentMonth.getFullYear() + '-' + (currentMonth.getMonth() + 1);
// if (!counts[monthKey1]) {
// counts[monthKey1] = {};
// }
// if ( !counts[monthKey1][product])
// counts[monthKey1][product] = amount;
// else
// counts[monthKey1][product] += amount;
// });
// // 现在 counts 对象包含了每个月份每种产品的销售额信息
// const products = this.selectedColumnData;
// let years = Array.from(new Set(salesData.map(record => new Date(record.month).getFullYear()+ '-' + (new Date(record.month).getMonth() + 1)))).sort();
// // Create the structure similar to 'source'
// let result = [['product', ...years]];
// products.forEach(product => {
// let rowData = [product];
// for (let i = 0; i < years.length; i++) {
// rowData.push(0);
// }
// result.push(rowData);
// });
// products.forEach(product=>
// {
// years.forEach(year => {
// if (counts[year][product])
// result[products.indexOf(product)+1][years.indexOf(year)+1]+=counts[year][product];
// else
// result[products.indexOf(product)+1][years.indexOf(year)+1]+=0;
// });
// }
// )
// // console.log(result)
// return result;
// },
countsumbystring() {
// 创建一个对象来存储每个名字对应的实数总和
this.hasUpperContent = true;
@ -428,9 +307,7 @@ export default {
let num=cul[i].match(/\d+/)
foundLabel = this.mycolumns[num-1].label;
selectname.push(foundLabel)
}
}
@ -1656,6 +1533,7 @@ currentDate.setDate(currentDate.getDate()+1);
border-radius: 2%;
padding: 20px;
height: 100%;
width: 28%;
}
.right-grid {
@ -1663,11 +1541,9 @@ currentDate.setDate(currentDate.getDate()+1);
border-radius: 2%;
padding: 20px;
height: 100%;
width: 72%;
}
.chart-container {
width: 90%;
height: 90%;
@ -1706,7 +1582,7 @@ currentDate.setDate(currentDate.getDate()+1);
.containerHead{
padding:0;
height:8%;
height:6%;
padding :0;
width: 100%;
display:flex;
@ -1722,5 +1598,19 @@ currentDate.setDate(currentDate.getDate()+1);
width: 3%;
font-weight: 25px;
}
.el-button{
background-color: transparent;
margin:2;
padding:2;
border: 0;
color: #0e5858;
font-size: 24px;
}
.el-button:hover{
background-color: rgba(255, 255, 255, 0.7);
}
#containerMain{
background-color: #f5f6fa;
}
</style>

62
src/views/newHomePage.vue
View File

@ -6,10 +6,9 @@
</HeaderPage>
</el-header>
<el-main style="padding:0; height:94%; display: flex; width:100%;" >
<el-container id = "container_Statistics">
<el-header class = 'flex justify-center h-1/5 pt-3'>
<div class="stats stats-vertical lg:stats-horizontal shadow bg-white text-gray-900">
<div class="stat">
<el-container id = "container_Statistics" class ='flex justify-center p-2 '>
<div class="stats stats-vertical shadow bg-white text-gray-900 w-full">
<div class="stat w-full">
<div class="stat-title text-gray-700">已导入的线索库数量</div>
<div class="stat-value">31K</div>
<div class="stat-desc">文件导入/已经存储的线索库</div>
@ -26,57 +25,6 @@
<div class="stat-desc">删除的记录(批量/单条)</div>
</div>
</div>
</el-header>
<div class="hero bg-white-200 min-h-screen">
<div class="hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">你好，欢迎来到线索库管理系统</h1>
<p class="py-6">
提供直观的线索库管理工具
</p>
<button class="btn btn-primary">Get Started</button>
</div>
</div>
</div>
<!-- <el-main>
<div class="carousel rounded-box">
<div class="carousel-item">
<img
src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
alt="Burger" />
</div>
<div class="carousel-item">
<img
src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
alt="Burger" />
</div>
<div class="carousel-item">
<img
src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
alt="Burger" />
</div>
<div class="carousel-item">
<img
src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
alt="Burger" />
</div>
<div class="carousel-item">
<img
src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
alt="Burger" />
</div>
<div class="carousel-item">
<img
src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
alt="Burger" />
</div>
<div class="carousel-item">
<img
src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
alt="Burger" />
</div>
</div>
</el-main> -->
</el-container>
<el-container id = "container_Tools_Main" class ='shadow-lg'>
<!--这是主体的头栏用于防止工具等-->
@ -228,7 +176,7 @@ export default{
}
/* 工具栏和主体样式 */
#container_Tools_Main{
width: 50%;
width: 90%;
padding: 0;
margin: 0;
height:100%;
@ -246,6 +194,6 @@ export default{
}
#container_Statistics{
background-color: #f5f6fa;
width:50%;
width:20%;;
}
</style>