Skip to content

B
bigDataSystem
Commit 1b699cf5 authored by liwei's avatar liwei
Browse files
Options

概览页面

parent 33ba420a
Hide whitespace changes
Inline Side-by-side
Showing with 695 additions and 1 deletion
src/views/OverviewMallResources/MyProcess.vue 0 → 100644
View file @ 1b699cf5
<template>
<Card :loading="loading">
<div class="centent1">
我的流程
</div>
<div class="centent2">
<template v-for="(item, index) in CardList2" :key="item.title">
<Card
size="small"
:loading="loading"
hoverable="true"
class="md:w-25 w-full !md:mt-0 h-25 md:h-25"
:class="[{ 'md:mr-4': index + 1 < 4, 'mt-4': index > 0,'bg-color':(index % 4) + 1 },`bg-color-${(index % 4) + 1}`]"
>
<div :class="`centent2-1`" class="md:h-20">
<div>
<span class="centent2-1-1">{{item.total}}</span>
<span>{{item.title}}</span>
</div>
</div>
</Card>
<Divider v-if="index === 2" :class="`centent2-2`" type="vertical" class="md:h-25" />
</template>
</div>
<List :pagination="pagination">
<template v-for="item in dataList" :key="item.id">
<List.Item class="centent3" @click="">
<List.Item.Meta class="centent3-1">
<template #avatar>
<Icon style="font-size: 20px" v-if="item.icon" :icon="item.icon" :color="item.color" />
</template>
<template #title>
<div class="centent3-1-1">
<span>{{ item.title }}</span>
<span style="color:rgb(161, 161, 161);">当前审批人: {{item.approver}}</span>
</div>
</template>
<template #description>
<div class="centent3-1-2">
<div>{{ item.desc }}</div>
<div>审批时间: {{ item.time }}</div>
</div>
</template>
</List.Item.Meta>
</List.Item>
</template>
</List>
</Card>
</template>
<script lang="ts" setup>
import { Tag, Card,Select,List,Divider } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {ListData, TableData2,CardList2} from "./overviewMallResourceData";
import {columns2} from "./overviewMallResource.data";
import { ref } from 'vue';
import Icon from '@/components/Icon/Icon.vue';
const dataList = ref(ListData)
</script>
<style lang="less" scoped>
.centent2{
display: flex;
justify-content: center;
.centent2-1{
display: flex;
align-items: center;
justify-content: center;
.centent2-1-1{
display:flex;
justify-content: center;
align-items: center
}
}
.centent2-2{
margin-right: 20px;
border:1px solid rgb(240, 242, 243);
}
}
.centent1{
display: flex;
margin-bottom: 10px;
font-weight: bold;
}
.centent3{
background-color: rgb(250, 251, 252);
margin-top: 10px;
.centent3-1{
display: flex !important;
align-items: center !important;
.centent3-1-1{
display: flex;
justify-content: space-between;
}
.centent3-1-2{
display: flex;
justify-content: space-between;
}
}
}
</style>
src/views/OverviewMallResources/PopularResources.vue 0 → 100644
View file @ 1b699cf5
<template>
<Card :loading="loading">
<div class="centent1">
<div style="font-weight: bold">
热门资源Top10
</div>
<div>
<Select
v-model:value="optionValue"
show-search
placeholder="请选择版本"
style="width: 100px;margin-right: 10px"
:options="options"
@change="handleChange"
></Select>
<Select
v-model:value="optionValue"
show-search
placeholder="请选择版本"
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>
</div>
</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">
{{ text }}
</a>
<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>
<a @click="showDetails(record)" v-else> {{ text }}</a>
</template>
</BasicTable>
</Card>
</template>
<script lang="ts" setup>
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 },
});
</script>
<style lang="less" scoped>
.centent1{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
</style>
src/views/OverviewMallResources/ResourceStatistics.vue 0 → 100644
View file @ 1b699cf5
<template>
<div class="center">
<div class="center1">
<div class="center1-1">
资源统计
</div>
<div class="center1-2">
<Select
v-model:value="optionValue"
show-search
placeholder="请选择版本"
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>
</div>
</div>
<div class="center2">
<template v-for="(item, index) in CardList" :key="item.title">
<Card
size="small"
: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}`]"
>
<div class="center2-1" >{{item.title}}</div>
<div class="center2-2">
<CountTo :startVal="1" :endVal="item.total" class="text-2xl" />
<span>{{item.unit}}</span>
</div>
<div>
<span></span>
<span></span>
</div>
</Card>
</template>
</div>
</div>
</template>
<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 { CardList } from './overviewMallResourceData';
import { reactive,unref,onDeactivated,onMounted,ref,watch,Ref } from 'vue';
const optionValue = ref('全部类型')
const options = ref([
{
label:'全部类型',
value:'全部类型'
},
])
defineProps({
loading: {
type: Boolean,
},
});
</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;
}
}
.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/StatisticalChart.vue 0 → 100644
View file @ 1b699cf5
<template>
<Card :loading="loading">
<div style="display: flex;justify-content: space-between;margin-bottom: 10px">
<div style="font-weight: bold">
趋势统计图
</div>
<div>
<Select
v-model:value="optionValue"
show-search
placeholder="请选择类型"
style="width: 100px;margin-right: 10px"
:options="options"
@change="handleChange"
></Select>
<span style="margin-right: 10px">最近7天</span>
<span style="margin-right: 10px">最近30天</span>
</div>
</div>
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts" setup>
import {onMounted, Ref, ref, watch} from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { Tag, Card,Select } from 'ant-design-vue';
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '400px',
},
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const optionValue = ref('全部类型')
const options = ref([
{
label:'全部类型',
value:'全部类型'
},
])
onMounted(() => {
setOptions({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
legend: {
data: ['我发布的', '总发布量', '总共享量', '总访问量'],
left: 'left', // 将图例放在左侧
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [...new Array(8)].map((_item, index) => `10/0${index + 1}`),
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: 'rgba(226,226,226,0.5)',
},
},
axisTick: {
show: false,
},
},
yAxis: [
{
type: 'value',
max: 100,
splitNumber: 6,
axisTick: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
},
},
},
],
grid: {
left: '1%',
right: '1%',
top: '50px',
bottom: 0,
containLabel: true,
},
series: [
{
name: '我发布的',
smooth: false,
data: [0, 20, 50, 40, 50, 60, 70, 80, 90, 50, 90, 30, 70, 60, 50, 90, 30, 20],
type: 'line',
areaStyle: {},
itemStyle: {
color: 'rgb(238, 173, 173,0.5)',
},
},
{
name: '总发布量',
smooth: false,
data: [20, 30, 40, 50, 60, 70, 80, 30, 100, 20, 80, 70, 80, 70, 40, 30, 20, 10],
type: 'line',
areaStyle: {},
itemStyle: {
color: 'rgb(244, 189, 139,0.5)',
},
},
{
name: '总共享量',
smooth: false,
data: [20, 25, 35, 40, 30, 35, 40, 50, 50, 55, 70, 70, 75, 60, 55, 40, 45, 20],
type: 'line',
areaStyle: {},
itemStyle: {
color: 'rgb(143, 191, 155,0.5)',
},
},
{
name: '总访问量',
smooth: false,
data: [0, 5, 10, 15, 20, 18, 17, 16, 15, 16, 15, 15, 14, 13, 12, 10, 8, 5],
type: 'line',
areaStyle: {},
itemStyle: {
color: 'rgb(178, 163, 219,0.5)',
},
},
],
});
});
</script>
src/views/OverviewMallResources/VisitSource.vue 0 → 100644
View file @ 1b699cf5
<template>
<Card :loading="loading">
<div style="display: flex;justify-content: space-between;margin-bottom: 10px">
<div style="font-weight: bold">
我的最近访问
</div>
<div>
<Select
v-model:value="optionValue"
show-search
placeholder="请选择版本"
style="width: 100px;margin-right: 10px"
:options="options"
@change="handleChange"
></Select>
<Select
v-model:value="optionValue"
show-search
placeholder="请选择版本"
style="width: 100px;margin-right: 10px"
:options="options"
@change="handleChange"
></Select>
</div>
</div>
<BasicTable @register="registerTable">
<template #sourceName="{ text, record }">
<Icon :icon="record.icon" style="margin-right: 10px;color: rgb(44, 157, 243)"/>
<a @click="showDetails(record)"> {{ text }}</a>
</template>
</BasicTable>
</Card>
</template>
<script lang="ts" setup>
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 {TableData2} from "./overviewMallResourceData";
import {columns2} 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: TableData2.length,
code:'',
message:'',
data: [],
};
return { ...response,data: TableData2 };
},
columns:columns2,
pagination:false,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
bordered: true,
scroll: { y: 500 },
});
</script>
src/views/OverviewMallResources/index.vue 0 → 100644
View file @ 1b699cf5
<template>
<div class="p-4">
<ResourceStatistics :loading="loading" class="enter-y" />
<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" />
</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" />
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import ResourceStatistics from './ResourceStatistics.vue';
import VisitSource from './VisitSource.vue';
import PopularResources from './PopularResources.vue';
import MyProcess from './MyProcess.vue';
import { Tag, Card } from 'ant-design-vue';
import StatisticalChart from './StatisticalChart.vue'
const loading = ref(false);
setTimeout(() => {
loading.value = false;
}, 1500);
</script>
src/views/OverviewMallResources/overviewMallResource.data.ts 0 → 100644
View file @ 1b699cf5
import {getAllRoleList} from '@/api/system/role/role';
import { BasicColumn, FormSchema } from '@/components/Table';
import {h} from "vue";
import {Input, Select, Tag} from "ant-design-vue";
import { Switch } from 'ant-design-vue';
import {useMessage} from "@/hooks/web/useMessage";
import {changeFlagApi} from "@/api/system/user/user";
import {DescItem} from "@/components/Description";
import {uploadApi} from "@/api/sys/upload"; // 引入开关组件
type CheckedType = boolean | string | number;
/**主页面列表 表头*/
export const columns1: BasicColumn[] = [
{
title: '排名',
dataIndex: 'sort',
width: 150,
slots: { customRender: 'sort' },
},
{
title: '资源名称',
dataIndex: 'sourceName',
width: 150,
slots: { customRender: 'sourceName' },
},
{
title: '权属机构',
dataIndex: 'mechanism',
width: 150,
},
{
title: '访问量',
dataIndex: 'trafficVolume',
width: 150,
},
];
/**主页面列表 表头*/
export const columns2: BasicColumn[] = [
{
title: '访问时间',
dataIndex: 'viewTime',
width: 150,
},
{
title: '资源名称',
dataIndex: 'sourceName',
width: 150,
slots: { customRender: 'sourceName' },
},
{
title: '权属机构',
dataIndex: 'institution',
width: 150,
},
];
src/views/OverviewMallResources/overviewMallResourceData.ts 0 → 100644
View file @ 1b699cf5
export const CardList: any[] = [
{
title: '公共资源',
icon: 'visit-count|svg',
value: 2000,
total: 24567,
color:'rgb(42, 207, 226)',
unit:'个',
action: '月',
},
{
title: '发布量',
icon: 'total-sales|svg',
value: 20000,
total: 24567,
unit:'个',
color:'rgb(50, 183, 117)',
action: '月',
},
{
title: '访问量',
icon: 'download-count|svg',
value: 8000,
total: 234567,
unit:'次',
color:'rgb(237, 185, 18)',
action: '周',
},
{
title: '共享量',
icon: 'transaction|svg',
value: 5000,
total: 8326,
unit:'个',
color:'rgb(248, 161, 59)',
action: '年',
},
];
export const CardList2: any[] = [
{
title: '审核中',
total: 4,
},
{
title: '已通过',
total: 1,
},
{
title: '已驳回',
total: 1,
},
{
title: '审核中',
total: 1,
},
];
export const TableData1:any[] = [
{ sort: 1, sourceName: '资源A', mechanism: '机构甲', trafficVolume: 12345,icon:'pajamas:label' },
{ sort: 2, sourceName: '资源B', mechanism: '机构乙', trafficVolume: 23456,icon:'bx:file' },
{ sort: 3, sourceName: '资源C', mechanism: '机构丙', trafficVolume: 34567,icon:'bx:file'},
{ sort: 4, sourceName: '资源D', mechanism: '机构丁', trafficVolume: 45678,icon:'majesticons:table'},
{ sort: 5, sourceName: '资源E', mechanism: '机构戊', trafficVolume: 56789,icon:'pajamas:label' },
{ sort: 6, sourceName: '资源F', mechanism: '机构己', trafficVolume: 67890,icon:'majesticons:table' },
{ sort: 7, sourceName: '资源G', mechanism: '机构庚', trafficVolume: 78901,icon:'pajamas:label' },
{ sort: 8, sourceName: '资源H', mechanism: '机构辛', trafficVolume: 89012,icon:'majesticons:table'},
{ sort: 9, sourceName: '资源I', mechanism: '机构壬', trafficVolume: 90123,icon:'pajamas:label'},
{ sort: 10, sourceName: '资源J', mechanism: '机构癸', trafficVolume: 101234,icon:'majesticons:table'}
]
export const TableData2:any[] = [
{ viewTime: '2024-11-29 15:30:00', sourceName: '资源A', institution: '教育研究院',icon:'pajamas:label' },
{ viewTime: '2024-11-29 16:45:00', sourceName: '资源B', institution: '科学研究所',icon:'bx:file' },
{ viewTime: '2024-11-29 17:12:00', sourceName: '资源C', institution: '文化发展中心',icon:'bx:file' },
{ viewTime: '2024-11-29 18:23:00', sourceName: '资源D', institution: '技术开发公司',icon:'pajamas:label' },
{ viewTime: '2024-11-29 19:34:00', sourceName: '资源E', institution: '环境保护局',icon:'majesticons:table' },
{ viewTime: '2024-11-29 20:00:00', sourceName: '资源F', institution: '卫生健康委员会',icon:'majesticons:table' },
{ viewTime: '2024-11-29 21:15:00', sourceName: '资源G', institution: '经济研究会',icon:'pajamas:label' },
{ viewTime: '2024-11-29 22:30:00', sourceName: '资源H', institution: '艺术学院',icon:'bx:file' },
{ viewTime: '2024-11-29 23:45:00', sourceName: '资源I', institution: '法律咨询中心',icon:'pajamas:label' },
{ viewTime: '2024-11-30 00:10:00', sourceName: '资源J', institution: '农业科学院',icon:'majesticons:table' }
]
export const ListData:any[] = [
{
id: 2,
title: '申请共享:华夏上证50ETF价值分析',
desc:'申请访问:常规申请',
time:'2021-06-01 12:00:00',
approver:'admin',
icon: 'pajamas:label',
color: 'rgb(44, 157, 243)',
},
{
id: 3,
title: '申请共享:华夏上证50ETF价值分析',
desc:'申请访问:常规申请',
time:'2021-06-01 12:00:00',
approver:'admin',
icon: 'pajamas:label',
color: 'rgb(44, 157, 243)',
},
{
id: 4,
title: '申请共享:华夏上证50ETF价值分析',
desc:'申请访问:常规申请',
time:'2021-06-01 12:00:00',
approver:'admin',
icon: 'pajamas:label',
color: 'rgb(44, 157, 243)',
},
{
id: 5,
title: '申请共享:华夏上证50ETF价值分析',
desc:'申请访问:常规申请',
time:'2021-06-01 12:00:00',
approver:'admin',
icon: 'pajamas:label',
color: 'rgb(44, 157, 243)',
},
]
src/views/dataSharingAndExchange/resourceManagement/detail/index.vue
View file @ 1b699cf5
......@@ -268,7 +268,7 @@ import ModelAdd from '@/views/dataWarehousePlanning/physicalModel/modelAdd.vue';
import { BasicTable, TableAction, useTable } from '@/components/Table';
import { columnsDetail } from '@/views/dataWarehousePlanning/physicalModel/model.data';
import CrossTable from '@/views/dataWarehousePlanning/logicalModel/modelDetail/crossTable.vue';
import SqlDevelop from '@/views/dataWarehousePlanning/resourceManagement/institution.data.ts';
import SqlDevelop from '@/views/dataWarehousePlanning/resourceManagement/institution.overviewMallResourceData.ts';
import editFormSchema from '@/views/dataSharingAndExchange/physicalModel/modelDetail/sqlDevelop.vue';
import ModelCreateTable from '@/views/dataWarehousePlanning/physicalModel/modelDetail/modelCreateTable.vue';
import VersionModel from '@/views/dataWarehousePlanning/physicalModel/modelDetail/versionModel.vue';
......
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