test #47

Merged
gtz217 merged 273 commits from test into master 2023-10-17 08:53:54 +08:00
4 changed files with 261 additions and 26 deletions
Showing only changes of commit 9947b2fa37 - Show all commits

View File

@ -6,26 +6,43 @@
-->
<template>
<div id="detail-graph">
detail graph (echarts)
</div>
<div class="cell">
<div class="title">
<span>
{{ title }}
</span>
</div>
<div class="content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: "DetailGraph",
components: {},
props: {},
data() {
return {
configs: {}
}
},
computed: {},
methods: {},
}
name: 'DetailGraph',
components: {},
props: {
title: {
type: String,
default: 'detail graph (echarts)',
},
},
};
</script>
<style scoped lang="scss">
.cell {
// background: #cfcfcf;
border: 1px solid #cfcfcf;
border-radius: 8px;
padding: 8px;
}
.title > span {
display: inline-block;
padding: 4px 8px 4px 6px;
background: rgba(20, 145, 210, 0.155);
border-left: 4px solid rgba(20, 145, 210);
}
</style>

View File

@ -0,0 +1,136 @@
<!--
filename: total.vue
author: liubin
date: 2023-08-07 15:04:31
description:
-->
<template>
<div class="total-graph" id="total-graph">
<div id="updata" class="updata"></div>
<div id="downdata" class="downdata"></div>
<div id="checktotal" class="checktotal"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'TotalGraph',
components: {},
props: {},
data() {
return {
config: {},
upChart: null,
downChart: null,
totalChart: null,
};
},
computed: {},
mounted() {
this.init();
},
methods: {
init() {
this.initUpdata();
this.initDowndata();
this.initChecktotal();
},
initUpdata() {
if (!this.upChart)
this.upChart = echarts.init(document.getElementById('updata'));
this.upChart.setOption(this.handleOption({}));
},
initDowndata() {
if (!this.downChart)
this.downChart = echarts.init(document.getElementById('downdata'));
this.downChart.setOption(this.handleOption({}));
},
initChecktotal() {
if (!this.totalChart)
this.totalChart = echarts.init(document.getElementById('checktotal'));
this.totalChart.setOption(this.handleOption({}));
},
handleOption(option) {
const defaultOption = {
tooltip: {
trigger: 'item',
},
legend: {
top: '5%',
left: 'center',
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' },
],
},
],
};
return defaultOption;
},
},
};
</script>
<style scoped lang="scss">
#total-graph {
margin-top: 8px;
width: 100%;
// height: 400px;
background: #ccc;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 240px);
row-gap: 20px;
}
.updata {
width: 240px;
justify-self: center;
background: rgba($color: #f00, $alpha: 0.3);
}
.downdata {
width: 240px;
justify-self: center;
background: rgba($color: #0f0, $alpha: 0.3);
}
.checktotal {
width: 240px;
background: rgba($color: #00f, $alpha: 0.3);
grid-column: span 2;
justify-self: center;
}
</style>

View File

@ -0,0 +1,61 @@
<!--
filename: graphPage.vue
author: liubin
date: 2023-08-07 13:46:59
description:
-->
<template>
<div class="graph-page">
<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
<TotalGraph />
</DetailGraph>
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据" />
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
</div>
</template>
<script>
import DetailGraph from './components/detailGraph.vue';
import TotalGraph from './components/graphs/total.vue';
export default {
name: 'GraphPage',
components: { DetailGraph, TotalGraph },
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.graph-page {
height: 100%;
display: grid;
// grid-template-columns: ;
// grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: minmax(300px, max-content);
gap: 12px;
}
#dg1 {
grid-column: 1 / 3;
}
#dg2 {
grid-column: 3 / 5;
}
#dg3 {
grid-column: span 2;
}
#dg4 {
grid-column: span 2;
}
</style>

View File

@ -13,24 +13,28 @@
ref="search-bar"
@headBtnClick="handleSearchBarBtnClick" />
<!-- 列表 -->
<base-table
v-if="mode == 'table'"
:table-props="tableProps"
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-data="list"
@emit-fun="handleEmitFun">
<!-- <method-btn
<transition mode="out-in" name="fade-down">
<template v-if="mode == 'table'">
<!-- 列表 -->
<base-table
v-if="mode == 'table'"
:table-props="tableProps"
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-data="list"
@emit-fun="handleEmitFun">
<!-- <method-btn
v-if="tableBtn.length"
slot="handleBtn"
label="操作"
fixed="right"
:method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> -->
</base-table>
</base-table>
</template>
<p v-if="mode == 'graph'">图形版</p>
<GraphPage v-else />
</transition>
<!-- todo: 数据总览用弹窗包裹的 table 实现 -->
<base-dialog
@ -46,11 +50,12 @@
</template>
<script>
import GraphPage from './graphPage.vue';
import summaryTable from './components/summaryTable.vue';
export default {
name: 'QualityStatistics',
components: { summaryTable },
components: { GraphPage, summaryTable },
props: {},
data() {
return {
@ -358,6 +363,22 @@ export default {
}
}
}
.fade-down-enter-active,
.fade-down-leave-active {
transition: all 0.3s;
}
.fade-down-enter,
.fade-down-leave-to {
transform: translateY(20%);
opacity: 0;
}
.fade-down-enter-to,
.fade-down-leave {
transform: translateY(0);
}
</style>
<!--