1122
This commit is contained in:
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="w-full lg:w-9/12 ma-content-block rounded-sm p-3 mt-3 bg-color">
|
||||
<div class="flex justify-between">
|
||||
系统公告
|
||||
<a-link>更多</a-link>
|
||||
</div>
|
||||
<a-table :data="data" :columns="columns" class="mt-2" :pagination="false">
|
||||
<template #title="{ record }">
|
||||
<a-link @click="viewDetail(record)">{{ record.title }}</a-link>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<a-modal v-model:visible="detailVisible" fullscreen :footer="false">
|
||||
<template #title>公告详情</template>
|
||||
<a-typography :style="{ marginTop: '-30px' }">
|
||||
<a-typography-title class="text-center">
|
||||
{{ row?.title }}
|
||||
</a-typography-title>
|
||||
<a-typography-paragraph class="text-right" style="font-size: 13px; color: var(--color-text-3)">
|
||||
<a-space size="large">
|
||||
<span>创建时间：{{ row?.created_at }}</span>
|
||||
</a-space>
|
||||
</a-typography-paragraph>
|
||||
<a-typography-paragraph>
|
||||
<div v-html="row?.content"></div>
|
||||
</a-typography-paragraph>
|
||||
</a-typography>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 主要是首页-工作台-系统公告
|
||||
import { ref, reactive } from "vue"
|
||||
import commonApi from "@/api/common"
|
||||
|
||||
const data = ref([])
|
||||
const columns = reactive([
|
||||
{ title: "标题", dataIndex: "title", slotName: "title" },
|
||||
{ title: "发布时间", dataIndex: "created_at", width: 180, align: "right" }
|
||||
])
|
||||
|
||||
const row = ref({})
|
||||
const detailVisible = ref(false)
|
||||
const viewDetail = async (record) => {
|
||||
row.value = record
|
||||
detailVisible.value = true
|
||||
}
|
||||
const getNoticeList = async () => {
|
||||
// 获取后台公告
|
||||
const res = await commonApi.getNoticeList({ pageSize: 5, orderBy: "id", orderType: "desc" })
|
||||
data.value = res.data
|
||||
}
|
||||
|
||||
getNoticeList()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bg-color{
|
||||
background-color: var(--color-bg-1);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="w-full lg:w-3/12 ma-content-block rounded-sm ml-0 lg:ml-3 p-3 mt-3">
|
||||
<div class="flex">成都测试管理平台相关</div>
|
||||
<div class="block lg:grid lg:grid-cols-2 lg:gap-1 mt-3">
|
||||
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
|
||||
<a-button type="outline" class="w-full">仓库地址</a-button>
|
||||
</a-card>
|
||||
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
|
||||
<a-button type="outline" class="w-full">Gitee地址</a-button>
|
||||
</a-card>
|
||||
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
|
||||
<a-button type="outline" class="w-full">仓库地址</a-button>
|
||||
</a-card>
|
||||
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
|
||||
<a-button type="outline" class="w-full">Gitee地址</a-button>
|
||||
</a-card>
|
||||
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
|
||||
<a-button type="outline" class="w-full">仓库地址</a-button>
|
||||
</a-card>
|
||||
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
|
||||
<a-button type="outline" class="w-full">Gitee地址</a-button>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
115
cdTMP/src/views/dashboard/workplace/components/cpns/st-count.vue
Normal file
115
cdTMP/src/views/dashboard/workplace/components/cpns/st-count.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="w-full mx-auto">
|
||||
<div class="block lg:grid lg:grid-cols-4 lg:gap-1">
|
||||
<a-card
|
||||
style="height: 65px"
|
||||
class="rounded-sm mt-3"
|
||||
:body-style="{ padding: 0, height: '65px' }"
|
||||
:bordered="false"
|
||||
hoverable
|
||||
>
|
||||
<div class="flex justify-between h-full">
|
||||
<div class="en-title bg-blue-600">NU</div>
|
||||
<div class="w-full ml-3.5 flex justify-between items-center">
|
||||
用户统计
|
||||
<a-space size="large" class="mr-3">
|
||||
<div class="text-right">
|
||||
<div>总数</div>
|
||||
<div>2</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div>新增</div>
|
||||
<div><icon-caret-up class="text-green-600" /> 15</div>
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card
|
||||
style="height: 65px"
|
||||
class="rounded-sm mt-3 lg:ml-2"
|
||||
:body-style="{ padding: 0, height: '65px' }"
|
||||
:bordered="false"
|
||||
hoverable
|
||||
>
|
||||
<div class="flex justify-between h-full">
|
||||
<div class="en-title bg-red-600">NA</div>
|
||||
<div class="w-full ml-3.5 flex justify-between items-center">
|
||||
进行项目统计
|
||||
<a-space size="large" class="mr-3">
|
||||
<div class="text-right">
|
||||
<div>总数</div>
|
||||
<div>23</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div>减少</div>
|
||||
<div><icon-caret-down class="text-red-600" /> 2</div>
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card
|
||||
style="height: 65px"
|
||||
class="rounded-sm mt-3 lg:ml-2"
|
||||
:body-style="{ padding: 0, height: '65px' }"
|
||||
:bordered="false"
|
||||
hoverable
|
||||
>
|
||||
<div class="flex justify-between h-full">
|
||||
<div class="en-title bg-pink-600">LC</div>
|
||||
<div class="w-full ml-3.5 flex justify-between items-center">
|
||||
项目总数
|
||||
<a-space size="large" class="mr-3">
|
||||
<div class="text-right">
|
||||
<div>总数</div>
|
||||
<div>234</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div>新增</div>
|
||||
<div><icon-caret-down class="text-red-600" /> 3</div>
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card
|
||||
style="height: 65px"
|
||||
class="rounded-sm mt-3 lg:ml-2"
|
||||
:body-style="{ padding: 0, height: '65px' }"
|
||||
:bordered="false"
|
||||
hoverable
|
||||
>
|
||||
<div class="flex justify-between h-full">
|
||||
<div class="en-title bg-green-600">OC</div>
|
||||
<div class="w-full ml-3.5 flex justify-between items-center">
|
||||
提交项目总数
|
||||
<a-space size="large" class="mr-3">
|
||||
<div class="text-right">
|
||||
<div>总数</div>
|
||||
<div>45</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div>新增</div>
|
||||
<div><icon-caret-up class="text-green-600" /> 2</div>
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.en-title {
|
||||
width: 75px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 65px;
|
||||
font-weight: bold;
|
||||
font-size: 1.3em;
|
||||
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="ma-content-block p-3 mt-3 bg-white">
|
||||
<ma-chart height="300px" :option="loginChartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted, ref } from "vue"
|
||||
import { graphic } from "echarts"
|
||||
|
||||
function graphicFactory(side) {
|
||||
return {
|
||||
type: "text",
|
||||
bottom: "8",
|
||||
...side,
|
||||
style: {
|
||||
text: "",
|
||||
textAlign: "center",
|
||||
fill: "#4E5969",
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const xAxis = ref([
|
||||
"2022-07-06",
|
||||
"2022-07-07",
|
||||
"2022-07-08",
|
||||
"2022-07-09",
|
||||
"2022-07-10",
|
||||
"2022-07-11",
|
||||
"2022-07-12",
|
||||
"2022-07-13",
|
||||
"2022-07-14",
|
||||
"2022-07-15"
|
||||
])
|
||||
const chartsData = ref([32, 56, 61, 89, 12, 33, 56, 92, 180, 25])
|
||||
const graphicElements = ref([graphicFactory({ left: "2.6%" }), graphicFactory({ right: 0 })])
|
||||
|
||||
const loginChartOptions = ref({
|
||||
grid: {
|
||||
left: "2.6%",
|
||||
right: "0",
|
||||
top: "10",
|
||||
bottom: "30"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
offset: 2,
|
||||
data: xAxis.value,
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
color: "#4E5969",
|
||||
formatter(value, idx) {
|
||||
if (idx === 0) return ""
|
||||
if (idx === xAxis.value.length - 1) return ""
|
||||
return `${value}`
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
interval: (idx) => {
|
||||
if (idx === 0) return false
|
||||
if (idx === xAxis.value.length - 1) return false
|
||||
return true
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#E5E8EF"
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#23ADFF",
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter(value, idx) {
|
||||
if (idx === 0) return value
|
||||
return `${value}`
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#E5E8EF"
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter(params) {
|
||||
return `<div class="login-chart">
|
||||
<p class="tooltip-title">${params[0].axisValueLabel}</p>
|
||||
<div class="content-panel"><span>项目新增</span><span class="tooltip-value">${Number(
|
||||
params[0].value
|
||||
).toLocaleString()}</span></div>
|
||||
</div>`
|
||||
}
|
||||
},
|
||||
graphic: {
|
||||
elements: graphicElements.value
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: chartsData.value,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 12,
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
itemStyle: {
|
||||
borderWidth: 2
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: new graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(30, 231, 255, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(36, 154, 255, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(111, 66, 251, 1)"
|
||||
}
|
||||
])
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(17, 126, 255, 0.16)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(17, 128, 255, 0)"
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="flex justify-between">
|
||||
<div class="ma-content-block rounded-sm flex justify-between w-full p-3 bg-color">
|
||||
<div class="pl-0 flex">
|
||||
<a-avatar :size="75" class="hidden lg:inline-block">
|
||||
<img src="@/assets/avatar/zhu.jpg" />
|
||||
</a-avatar>
|
||||
<div class="pl-3 mt-2">
|
||||
<div class="content-block-title">{{ userStore.name }}，今天天气很好，欢迎回来！</div>
|
||||
<div class="leading-5 mt-2 flex items-center">
|
||||
<a-tag color="red" bordered class="mr-2">好用的测试工具集</a-tag>
|
||||
欢迎使用测试管理平台 ⭐长期更新。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="datetime ml-5 hidden md:block">
|
||||
<h2 class="text-3xl text-center">{{ time }}</h2>
|
||||
<p class="text-base">{{ day }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue"
|
||||
import { useUserStore } from "@/store"
|
||||
import dayjs from "dayjs"
|
||||
const userStore = useUserStore()
|
||||
const time = ref(null)
|
||||
const day = ref(null)
|
||||
const showTime = () => {
|
||||
time.value = dayjs().format("HH:mm:ss")
|
||||
day.value = dayjs().format("YYYY年MM月DD日")
|
||||
}
|
||||
onMounted(() => {
|
||||
showTime()
|
||||
setInterval(() => showTime(), 1000)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.datetime {
|
||||
background: rgb(var(--primary-6));
|
||||
color: #fff;
|
||||
width: 160px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.bg-color {
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<st-welcome></st-welcome>
|
||||
<st-count />
|
||||
<st-project-chart />
|
||||
<div class="block lg:flex">
|
||||
<st-announced />
|
||||
<st-cdtestmanage-info />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import stWelcome from "./cpns/st-welcome.vue"
|
||||
import stCount from "./cpns/st-count.vue"
|
||||
import stProjectChart from "./cpns/st-project-chart.vue"
|
||||
import stAnnounced from "./cpns/st-announced.vue"
|
||||
import stCdtestmanageInfo from "./cpns/st-cdtestmanage-info.vue"
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Reference in New Issue
Block a user