Skip to content

B
bigDataSystem
Commit a6595b72 authored by chenjiahao's avatar chenjiahao
Browse files
Options

数据要素-概览-样式

parent ef475ce3
Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 107 deletions
src/views/OverviewMallResources/PopularResources.vue
View file @ a6595b72
<template>
<Card :loading="loading">
<div class="centent1">
<div style="font-weight: bold">
热门资源Top10
</div>
<div style="font-weight: bold"> 热门资源Top10 </div>
<div>
<Select
v-model:value="optionValue1"
show-search
placeholder="请选择"
style="width: 100px;margin-right: 10px"
style="width: 100px; margin-right: 10px"
:options="options1"
@change="handleChange"
></Select>
......@@ -17,7 +15,7 @@
v-model:value="optionValue2"
show-search
placeholder="请选择"
style="width: 150px;margin-right: 10px"
style="width: 150px; margin-right: 10px"
:options="options2"
@change="handleChange"
></Select>
......@@ -28,71 +26,79 @@
</div>
<BasicTable @register="registerTable">
<template #sort="{ text, record }">
<a @click="showDetails(record)" v-if="record.sort === 1 || record.sort === 2 || record.sort === 3" style="font-weight: bold">
<a
@click="showDetails(record)"
v-if="record.sort === 1 || record.sort === 2 || record.sort === 3"
style="font-weight: bold"
>
{{ text }}
</a>
<span v-else>{{text}}</span>
<span v-else>{{ text }}</span>
</template>
<template #sourceName="{ text, record }">
<Icon :icon="record.icon" style="margin-right: 10px;color: rgb(44, 157, 243)"/>
<a @click="showDetails(record)" v-if="record.sort === 1 || record.sort === 2 || record.sort === 3" style="font-weight: bold"> {{ text }}</a>
<Icon :icon="record.icon" style="margin-right: 10px; color: rgb(44, 157, 243)" />
<a
@click="showDetails(record)"
v-if="record.sort === 1 || record.sort === 2 || record.sort === 3"
style="font-weight: bold"
>
{{ text }}</a
>
<a @click="showDetails(record)" v-else> {{ text }}</a>
</template>
</BasicTable>
</Card>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Tag, Card,Select } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {tableData} from "@/views/realTimeSync/eventCenter/eventCenterData";
import {columns} from "@/views/realTimeSync/eventCenter/eventCenter.data";
import {TableData1} from "./overviewMallResourceData";
import {columns1} from "./overviewMallResource.data";
import Icon from '@/components/Icon/Icon.vue';
const [registerTable] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: TableData1.length,
code:'',
message:'',
data: [],
};
return { ...response,data: TableData1 };
},
columns:columns1,
pagination:false,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
bordered: true,
scroll: { y: 500 },
});
const optionValue1 = ref('全部类型')
const optionValue2 = ref('基础架构产品部')
const options1 = ref([
{
label:'全部类型',
value:'全部类型'
},
])
const options2 = ref([
{
label:'基础架构产品部',
value:'基础架构产品部'
},
])
import { ref } from 'vue';
import { Tag, Card, Select } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { tableData } from '@/views/realTimeSync/eventCenter/eventCenterData';
import { columns } from '@/views/realTimeSync/eventCenter/eventCenter.data';
import { TableData1 } from './overviewMallResourceData';
import { columns1 } from './overviewMallResource.data';
import Icon from '@/components/Icon/Icon.vue';
const [registerTable] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: TableData1.length,
code: '',
message: '',
data: [],
};
return { ...response, data: TableData1 };
},
columns: columns1,
pagination: false,
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
scroll: { y: 500 },
});
const optionValue1 = ref('全部类型');
const optionValue2 = ref('基础架构产品部');
const options1 = ref([
{
label: '全部类型',
value: '全部类型',
},
]);
const options2 = ref([
{
label: '基础架构产品部',
value: '基础架构产品部',
},
]);
</script>
<style lang="less" scoped>
.centent1{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.centent1 {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
</style>
src/views/OverviewMallResources/ResourceStatistics.vue
View file @ a6595b72
<template>
<div class="center">
<div class="center1">
<div class="center1-1">
资源统计
</div>
<div class="center1-1"> 资源统计 </div>
<div class="center1-2">
<Select
v-model:value="optionValue"
show-search
placeholder="请选择版本"
style="width: 100px;margin-right: 10px"
style="width: 100px; margin-right: 10px"
:options="options"
@change="handleChange"
></Select>
/>
<span style="margin-right: 10px">今日</span>
<span style="margin-right: 10px">最近7天</span>
<span style="margin-right: 10px">最近30天</span>
......@@ -25,12 +23,15 @@
:loading="loading"
hoverable="true"
class="md:w-90 w-full !md:mt-0"
:class="[{ 'md:mr-4': index + 1 < 4, 'mt-4': index > 0,'bg-color':(index % 4) + 1 },`bg-color-${(index % 4) + 1}`]"
:class="[
{ 'md:mr-4': index + 1 < 4, 'mt-4': index > 0, 'bg-color': (index % 4) + 1 },
`bg-color-${(index % 4) + 1}`,
]"
>
<div class="center2-1" >{{item.title}}</div>
<div class="center2-1">{{ item.title }}</div>
<div class="center2-2">
<CountTo :startVal="1" :endVal="item.total" class="text-2xl" />
<span>{{item.unit}}</span>
<span>{{ item.unit }}</span>
</div>
<div>
<span></span>
......@@ -44,16 +45,16 @@
<script lang="ts" setup>
import { CountTo } from '@/components/CountTo';
import Icon from '@/components/Icon/Icon.vue';
import { Tag, Card,Select } from 'ant-design-vue';
import { Tag, Card, Select } from 'ant-design-vue';
import { CardList } from './overviewMallResourceData';
import { reactive,unref,onDeactivated,onMounted,ref,watch,Ref } from 'vue';
const optionValue = ref('全部类型')
import { reactive, unref, onDeactivated, onMounted, ref, watch, Ref } from 'vue';
const optionValue = ref('全部类型');
const options = ref([
{
label:'全部类型',
value:'全部类型'
label: '全部类型',
value: '全部类型',
},
])
]);
defineProps({
loading: {
......@@ -62,39 +63,62 @@
});
</script>
<style lang="less" scoped>
.card{
::v-deep(.ant-card-body){
width: 100%;
display: flex;
}
}
/* 在您的CSS文件中 */
.bg-color-1 { background-color: rgb(42, 207, 226); }
.bg-color-2 { background-color: rgb(50, 183, 117); }
.bg-color-3 { background-color: rgb(237, 185, 18); }
.bg-color-4 { background-color: rgb(248, 161, 59); }
.center{
width: 100%;
height:220px;
background-color: white;
.center1{
display: flex;justify-content: space-between;
.center1-1{
font-weight: bold;margin-bottom: 10px;margin-top: 10px;margin-left: 10px;
}
.center1-2{
margin-bottom: 10px;margin-top: 10px;
.card {
::v-deep(.ant-card-body) {
width: 100%;
display: flex;
}
}
.center2{
display: flex;height: 150px;justify-content: center;margin-left: 10px;margin-right: 10px;
.center2-1{
color:white;
/* 在您的CSS文件中 */
.bg-color-1 {
background-color: rgb(42, 207, 226);
}
.bg-color-2 {
background-color: rgb(50, 183, 117);
}
.bg-color-3 {
background-color: rgb(237, 185, 18);
}
.bg-color-4 {
background-color: rgb(248, 161, 59);
}
.center {
padding: 24px;
width: 100%;
height: 240px;
background-color: white;
.center1 {
height: 32px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
.center1-1 {
font-weight: bold;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
}
.center1-2 {
margin-bottom: 10px;
margin-top: 10px;
}
}
.center2-2{
color:white;font-weight: bold;margin-top: 20px;margin-bottom: 20px
.center2 {
display: flex;
height: 150px;
justify-content: center;
margin-left: 10px;
margin-right: 10px;
.center2-1 {
color: white;
}
.center2-2 {
color: white;
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
}
}
}
}
</style>
src/views/OverviewMallResources/index.vue
View file @ a6595b72
......@@ -129,14 +129,17 @@
</template>
</Dropdown>
</div>
<ResourceStatistics :loading="loading" class="enter-y" />
<ResourceStatistics :loading="loading" class="enter-y rounded-lg shadow-sm" />
<div class="!my-4 md:flex enter-y">
<PopularResources class="md:w-1/2 w-full" :loading="loading" />
<VisitSource class="md:w-1/2 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
<VisitSource class="md:w-1/2 !md:ml-4 !md:mr-0 !md:my-0 !my-4 w-full" :loading="loading" />
</div>
<div class="!my-4 md:flex enter-y">
<MyProcess class="md:w-1/2 w-full" :loading="loading" />
<StatisticalChart class="md:w-1/2 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
<StatisticalChart
class="md:w-1/2 !md:ml-4 !md:mr-0 !md:my-0 !my-4 w-full"
:loading="loading"
/>
</div>
</div>
</template>
......
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