868 lines
25 KiB
Vue
868 lines
25 KiB
Vue
<template>
|
||
<!-- 流程列表 -->
|
||
<y9Table :config="y9TableConfig" :filterConfig="filterOperaConfig" @on-curr-page-change="handlerCurrPage"
|
||
ref="filterRef" @on-page-size-change="handlerPageSize">
|
||
<template v-slot:slotSearch>
|
||
<el-button :size="fontSizeObj.buttonSize" :style="{ fontSize: fontSizeObj.baseFontSize }"
|
||
class="global-btn-main" type="primary" @click="search">
|
||
<i class="ri-search-line"></i>
|
||
<span>{{ $t('查询') }}</span>
|
||
</el-button>
|
||
<el-button :size="fontSizeObj.buttonSize" :style="{ fontSize: fontSizeObj.baseFontSize }"
|
||
class="el-button el-button--default global-btn-third" @click="reset">
|
||
<i class="ri-refresh-line"></i>
|
||
<span>{{ $t('重置') }}</span>
|
||
</el-button>
|
||
</template>
|
||
</y9Table>
|
||
<!-- 增加页面 -->
|
||
<y9Dialog v-model:config="addDialogConfig">
|
||
<template v-slot>
|
||
<y9Form ref="ruleFormRef" :config="ruleFormConfig">
|
||
</y9Form>
|
||
</template>
|
||
</y9Dialog>
|
||
|
||
<y9Dialog v-model:config="openChartConfig">
|
||
<template v-slot>
|
||
<el-card class="box-card">
|
||
<div class="card-header">
|
||
<span>{{ $t('服务使用概况') }}</span>
|
||
<div style="height: 32px;"></div>
|
||
</div>
|
||
<div class="overview-content">
|
||
<!-- 数值展示 -->
|
||
<div class="stat-items">
|
||
<div class="stat-item">
|
||
<h2>{{ serviceUsedData.registerCount }}</h2>
|
||
<span>{{ $t('注册接口数') }}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<h2>{{ serviceUsedData.aveCount }}</h2>
|
||
<span>{{ $t('平均每天请求次数') }}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<h2>{{ serviceUsedData.todayCount }}</h2>
|
||
<span>{{ $t('今日调用次数') }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
<el-row class="bottomArea">
|
||
<el-col :span="4"></el-col>
|
||
<el-col :span="8">
|
||
<el-row class="labelTitle"><span>系统CPU使用率</span></el-row>
|
||
<el-row>
|
||
<div ref="cpuChartContainerRef" style="width: 100%; height: 200px;"></div>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-row class="labelTitle"><span>内存使用率</span></el-row>
|
||
<el-row>
|
||
<div ref="memoryChartContainerRef" style="width: 100%; height: 200px;"></div>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :span="4"></el-col>
|
||
</el-row>
|
||
</template>
|
||
</y9Dialog>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { computed, h, ref, inject, nextTick } from 'vue';
|
||
import { useSettingStore } from '@/store/modules/settingStore';
|
||
import { useI18n } from 'vue-i18n';
|
||
import { $validCheck } from '@/utils/validate'
|
||
import { getPage, saveInfo, delInfoById } from '@/api/execute/execute'
|
||
import {getRegisterNum} from '@/api/interface/interface'
|
||
import { getCpuUsed, getMaxMemory, getUsedMemory,getHttpServerReqs } from '@/api/serviceResourceIndicators/serviceResourceIndicators'
|
||
import {getInvokeNumToday} from "@/api/home/home";
|
||
import { ElMessage, ElMessageBox, ElSwitch } from 'element-plus';
|
||
import '@/assets/css/tablestatusfontcolor.css';
|
||
import * as echarts from 'echarts';
|
||
import 'echarts-liquidfill';
|
||
|
||
// 注入 字体对象
|
||
const fontSizeObj: any = inject('sizeObjInfo');
|
||
const settingStore = useSettingStore();
|
||
const { t } = useI18n();
|
||
const selectedDate = ref();
|
||
const query: any = ref({});
|
||
const filterRef = ref();
|
||
const interfaceList = ref([]);
|
||
const cpuChartContainerRef = ref();
|
||
const memoryChartContainerRef = ref();
|
||
const serviceUsedData = ref({
|
||
registerCount:0,
|
||
todayCount:0,
|
||
aveCount:0
|
||
})
|
||
|
||
const limitInfo = ref(false)
|
||
const sameId = ref()
|
||
const qbaseUrl = ref()
|
||
|
||
//表格配置
|
||
let y9TableConfig = ref({
|
||
headerBackground: true,
|
||
pageConfig: false,
|
||
columns: [
|
||
{
|
||
type: 'index',
|
||
title: computed(() => t('序号')),
|
||
width: 80,
|
||
fixed: 'left'
|
||
},
|
||
{
|
||
title: computed(() => t('应用名称')),
|
||
key: 'name'
|
||
},
|
||
{
|
||
title: computed(() => t('实例ID')),
|
||
key: 'instanceId'
|
||
},
|
||
{
|
||
title: computed(() => t('域名')),
|
||
key: 'hostName'
|
||
},
|
||
{
|
||
title: computed(() => t('ip')),
|
||
key: 'ip'
|
||
},
|
||
{
|
||
title: computed(() => t('端口')),
|
||
key: 'port'
|
||
},
|
||
{
|
||
title: computed(() => t('状态')),
|
||
key: 'status',
|
||
render: (row) => {
|
||
let statusText = "-"
|
||
let textClass = ""
|
||
if(row.status.toUpperCase() == "UP"){
|
||
statusText="健康"
|
||
textClass = "successText"
|
||
}
|
||
if(row.status.toUpperCase() == "DOWN"){
|
||
statusText="宕机"
|
||
textClass = "stopText"
|
||
}
|
||
if(row.status.toUpperCase() == "STARTING"){
|
||
statusText="启动中"
|
||
}
|
||
if(row.status.toUpperCase() == "OUT_OF_SERVICE"){
|
||
statusText="离线"
|
||
textClass = "stopText"
|
||
}
|
||
if(row.status.toUpperCase() == "UNKNOWN"){
|
||
statusText="未知"
|
||
}
|
||
return h('span', { class: textClass }, t(statusText)); // 输出格式化后的日期和时间
|
||
}
|
||
},
|
||
{
|
||
title: computed(() => t('注册时间')),
|
||
key: 'createTime',
|
||
render: (row) => {
|
||
let date = new Date(row.createTime);
|
||
let year = date.getFullYear();
|
||
let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1并补零
|
||
let day = date.getDate().toString().padStart(2, '0'); // 日期补零
|
||
let hours = date.getHours().toString().padStart(2, '0'); // 小时补零
|
||
let minutes = date.getMinutes().toString().padStart(2, '0'); // 分钟补零
|
||
let seconds = date.getSeconds().toString().padStart(2, '0'); // 秒补零
|
||
|
||
let formattedDateTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
||
return formattedDateTime; // 输出格式化后的日期和时间
|
||
}
|
||
},
|
||
{
|
||
title: computed(() => t('操作')),
|
||
fixed: 'right',
|
||
width: 210,
|
||
render: (row) => {
|
||
return h('div', [h('span', { onClick: () => { view(row) } }, t("详情")),
|
||
h('span', { class: 'leftMargin', onClick: () => { edit(row,"OUT_OF_SERVICE") } }, t('下线')),
|
||
h('span', { class: 'leftMargin', onClick: () => { edit(row,"UP") } }, t('上线')),
|
||
h('span', { class: 'leftMargin', onClick: () => { openChartView(row) } }, t('服务使用情况')),
|
||
]);
|
||
}
|
||
}
|
||
],
|
||
tableData: [],
|
||
});
|
||
|
||
// 过滤条件
|
||
const filterOperaConfig = ref({
|
||
filtersValueCallBack: (filter) => {
|
||
query.value = filter;
|
||
},
|
||
itemList: [
|
||
{
|
||
type: 'input',
|
||
value: '',
|
||
key: 'name',
|
||
label: computed(() => t('名称')),
|
||
labelWidth: '42px',
|
||
span: settingStore.device === 'mobile' ? 24 : 6
|
||
},
|
||
{
|
||
type: 'input',
|
||
value: '',
|
||
key: 'ip',
|
||
label: computed(() => t('IP')),
|
||
labelWidth: '42px',
|
||
span: settingStore.device === 'mobile' ? 24 : 6
|
||
},
|
||
{
|
||
type: 'slot',
|
||
slotName: 'slotSearch',
|
||
span: 6
|
||
},
|
||
{
|
||
type: 'slot',
|
||
slotName: 'slotBtns',
|
||
span: settingStore.device === 'mobile' ? 24 : 12,
|
||
justify: 'flex-end'
|
||
}
|
||
|
||
],
|
||
showBorder: true,
|
||
borderRadio: '4px'
|
||
});
|
||
|
||
//获取已接入接口列表
|
||
async function getDataList(type) {
|
||
y9TableConfig.value.loading = true;
|
||
let res = await getPage(
|
||
query.value
|
||
)
|
||
let tableData = analysisData(res)
|
||
//遍历数组
|
||
let traverseData = tableData
|
||
//赋值数组
|
||
let fzData = []
|
||
if(type!=null){
|
||
for(let key in query.value){
|
||
if(fzData.length!=0){
|
||
traverseData = fzData
|
||
fzData = []
|
||
}
|
||
for(let row of traverseData){
|
||
if(row[key].indexOf(query.value[key])!=-1){
|
||
fzData.push(row)
|
||
}
|
||
}
|
||
if(fzData.length==0){
|
||
break;
|
||
}
|
||
}
|
||
y9TableConfig.value.tableData = fzData || []
|
||
y9TableConfig.value.loading = false;
|
||
}else{
|
||
y9TableConfig.value.tableData = tableData || []
|
||
y9TableConfig.value.loading = false;
|
||
}
|
||
}
|
||
//解析json数据
|
||
function analysisData(data){
|
||
//存储需要的列表数据
|
||
let tableData = []
|
||
//获取注册应用数据列表
|
||
let applications = data.applications.application
|
||
//解析转化为table数据
|
||
for(let application of applications){
|
||
let appName = application.name
|
||
//解析实例
|
||
for(let instance of application.instance){
|
||
let instanceData = {
|
||
name: appName,
|
||
instanceId: instance.instanceId,
|
||
hostName:instance.hostName,
|
||
ip: instance.ipAddr,
|
||
port: instance.port["$"],
|
||
status: instance.status,
|
||
createTime: instance.leaseInfo.registrationTimestamp,
|
||
baseUrl: instance.healthCheckUrl.slice(0,-6)
|
||
}
|
||
tableData.push(instanceData)
|
||
}
|
||
}
|
||
return tableData
|
||
}
|
||
//查询按钮
|
||
function search() {
|
||
y9TableConfig.value.tableData = []
|
||
getDataList(true)
|
||
}
|
||
//重置按钮
|
||
function reset() {
|
||
filterRef.value.elTableFilterRef.onReset()
|
||
y9TableConfig.value.tableData = []
|
||
query.value = {}
|
||
getDataList(null)
|
||
}
|
||
//初始化table数据
|
||
function initTableData() {
|
||
y9TableConfig.value.tableData = []
|
||
getDataList(null)
|
||
}
|
||
initTableData()
|
||
// 应用 添加 修改表单ref
|
||
const ruleFormRef = ref();
|
||
const validateNumber = (rule: any, value: any, callback: any) => {
|
||
let result = $validCheck('number', value, true);
|
||
if (!result.valid) {
|
||
callback(new Error(result.msg));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
// 服务器使用情况
|
||
let openChartConfig = ref({
|
||
show: false,
|
||
title: computed(() => t('')),
|
||
showFooter: true,
|
||
onOkLoading: true,
|
||
onOk:(newConfig) =>{
|
||
openChartView(qbaseUrl.value)
|
||
}
|
||
});
|
||
|
||
// 增加 修改应用 弹框的变量配置 控制
|
||
let addDialogConfig = ref({
|
||
show: false,
|
||
title: computed(() => t('新增权限配置')),
|
||
showFooter: true,
|
||
onOkLoading: true,
|
||
onOk: (newConfig) => {
|
||
return new Promise(async (resolve, reject) => {
|
||
const y9RuleFormInstance = ruleFormRef.value?.elFormRef;
|
||
await y9RuleFormInstance.validate(async (valid) => {
|
||
if (valid) {
|
||
let data = ruleFormRef.value.model;
|
||
let formData = new FormData();
|
||
for (let key in data) {
|
||
if (data[key] != null && key != "createTime" && key != "updateTime")
|
||
formData.append(key, data[key])
|
||
}
|
||
let res = await saveInfo(
|
||
formData
|
||
)
|
||
if (res.code == 0) {
|
||
ElMessage({
|
||
message: '数据保存成功',
|
||
type: 'success'
|
||
})
|
||
resolve();
|
||
getDataList(null);
|
||
}
|
||
reject();
|
||
} else {
|
||
reject();
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
//校验ip格式
|
||
const validateIP = (rule: any, value: any, callback: any) => {
|
||
let regular = /^[0-9.,]+$/;
|
||
if(!regular.test(value)){
|
||
callback(new Error("输入了非法字符请检查"));
|
||
}else{
|
||
let ipList = value.split(",")
|
||
for(let it of ipList){
|
||
let ipItems = it.split(".")
|
||
if(ipItems.length!=4){
|
||
callback(new Error("IP"+it+"输入不合法请检查"));
|
||
}else{
|
||
for(let ipItem of ipItems){
|
||
if(ipItem!=null && ipItem!="" && ipItem.length!=0){
|
||
if(Number(ipItem)<0||Number(ipItem)>255){
|
||
callback(new Error("IP "+it+" 输入不合法请检查"));
|
||
}
|
||
}else{
|
||
callback(new Error("IP "+it+" 输入不合法请检查"));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
callback();
|
||
}
|
||
};
|
||
// 接口表单
|
||
let ruleFormConfig = ref({
|
||
//表单配置
|
||
model: {
|
||
isPrimary: 'Y',
|
||
isEnable: false
|
||
},
|
||
itemList: [
|
||
{
|
||
type: 'textarea',
|
||
label: computed(() => t('应用名称')),
|
||
prop: 'name',
|
||
props:{
|
||
rows:2
|
||
}
|
||
},
|
||
{
|
||
type: 'textarea',
|
||
label: computed(() => t('实例ID')),
|
||
prop: 'instanceId',
|
||
props:{
|
||
rows:2
|
||
}
|
||
},
|
||
{
|
||
type: 'textarea',
|
||
label: computed(() => t('域名')),
|
||
prop: 'hostName',
|
||
props:{
|
||
rows:2
|
||
}
|
||
},
|
||
{
|
||
type: 'input',
|
||
label: computed(() => t('IP')),
|
||
prop: 'ip',
|
||
},
|
||
{
|
||
type: 'input',
|
||
label: computed(() => t('端口')),
|
||
prop: 'port',
|
||
},
|
||
{
|
||
type: 'input',
|
||
label: computed(() => t('状态')),
|
||
prop: 'status'
|
||
},
|
||
{
|
||
type: 'input',
|
||
label: computed(() => t('注册时间')),
|
||
prop: 'createTime',
|
||
}
|
||
],
|
||
descriptionsFormConfig: {
|
||
labelWidth: '200px',
|
||
labelAlign: 'center',
|
||
}
|
||
});
|
||
//编辑
|
||
async function edit(row,type) {
|
||
let alertText = "下线"
|
||
if (type == "UP") {
|
||
alertText = "上线"
|
||
}
|
||
ElMessageBox.confirm(
|
||
'是否确认' + alertText + "该服务实例",
|
||
alertText+'确认',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'info',
|
||
draggable: true
|
||
}
|
||
).then(() => {
|
||
let data = {
|
||
url: "/" + row.name + "/" + row.instanceId + "/status?value=" + type,
|
||
data: { "status": type }
|
||
}
|
||
saveInfo(data).then((res) => {
|
||
getDataList(null)
|
||
ElMessageBox.alert("实例正在" + alertText + "，请稍后刷新页面！", "实例" + alertText + "确认", {
|
||
confirmButtonText: '确认'
|
||
})
|
||
})
|
||
}).catch(() => {
|
||
|
||
})
|
||
}
|
||
//详情
|
||
async function view(data) {
|
||
let row = JSON.parse(JSON.stringify(data))
|
||
let statusText = "-"
|
||
if (row.status.toUpperCase() == "UP") {
|
||
statusText = "健康"
|
||
}
|
||
if (row.status.toUpperCase() == "DOWN") {
|
||
statusText = "宕机"
|
||
}
|
||
if (row.status.toUpperCase() == "STARTING") {
|
||
statusText = "启动中"
|
||
}
|
||
if (row.status.toUpperCase() == "OUT_OF_SERVICE") {
|
||
statusText = "离线"
|
||
}
|
||
if (row.status.toUpperCase() == "UNKNOWN") {
|
||
statusText = "未知"
|
||
}
|
||
row.status = statusText
|
||
let date = new Date(row.createTime);
|
||
let year = date.getFullYear();
|
||
let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1并补零
|
||
let day = date.getDate().toString().padStart(2, '0'); // 日期补零
|
||
let hours = date.getHours().toString().padStart(2, '0'); // 小时补零
|
||
let minutes = date.getMinutes().toString().padStart(2, '0'); // 分钟补零
|
||
let seconds = date.getSeconds().toString().padStart(2, '0'); // 秒补零
|
||
|
||
let formattedDateTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
||
console.log(formattedDateTime)
|
||
row.createTime = formattedDateTime
|
||
ruleFormConfig.value.model = row
|
||
for (let it of ruleFormConfig.value.itemList) {
|
||
if (it.props == undefined) {
|
||
it.props = {
|
||
disabled: true
|
||
}
|
||
} else {
|
||
it.props.disabled = true
|
||
}
|
||
}
|
||
addDialogConfig.value.okText = false
|
||
addDialogConfig.value.title = computed(() => t('查看实例信息'))
|
||
addDialogConfig.value.show = true
|
||
}
|
||
const openChartView = (data)=>{
|
||
qbaseUrl.value = data
|
||
openChartConfig.value.okText = "刷新"
|
||
openChartConfig.value.title = computed(() => t('查看服务使用情况'))
|
||
openChartConfig.value.show = true
|
||
let baseData = {
|
||
baseUrl:data.baseUrl
|
||
}
|
||
getCpuUsed(baseData).then((res)=>{
|
||
console.log(res)
|
||
nextTick(() => {
|
||
const myChart = echarts.init(cpuChartContainerRef.value)
|
||
myChart.setOption(buildOptions(parseFloat(res.measurements[0].value.toFixed(4))))
|
||
})
|
||
})
|
||
getMaxMemory(baseData).then((res) => {
|
||
let maxMemory = res.measurements[0].value
|
||
getUsedMemory(baseData).then((res) => {
|
||
let usedMemory = res.measurements[0].value;
|
||
let used = (usedMemory/maxMemory).toFixed(4);
|
||
nextTick(() => {
|
||
const memoryChart = echarts.init(memoryChartContainerRef.value)
|
||
memoryChart.setOption(buildOptions(parseFloat(used)))
|
||
})
|
||
})
|
||
})
|
||
|
||
let param = {
|
||
id:data.instanceId
|
||
}
|
||
getRegisterNum(param).then((res)=>{
|
||
serviceUsedData.value.registerCount = res.data[0].num
|
||
})
|
||
getInvokeNumToday(param).then((res)=>{
|
||
serviceUsedData.value.todayCount = res.data
|
||
})
|
||
getHttpServerReqs(baseData).then((res)=>{
|
||
let measurements = res.measurements;
|
||
for(let it of measurements){
|
||
if(it.statistic.toUpperCase()=="COUNT"){
|
||
serviceUsedData.value.aveCount = calculateAverageDailyCallCount(data.createTime,it.value)
|
||
break;
|
||
}
|
||
}
|
||
})
|
||
}
|
||
// 计算平均每天调用次数
|
||
const calculateAverageDailyCallCount = (registrationDate,totalCallCount) => {
|
||
const now = new Date();
|
||
const registrationDateObj = new Date(registrationDate);
|
||
const daysSinceRegistration = (now - registrationDateObj) / (1000 * 60 * 60 * 24);
|
||
if(daysSinceRegistration<1){
|
||
return totalCallCount;
|
||
}
|
||
const averageDailyCallCount = totalCallCount / daysSinceRegistration;
|
||
return averageDailyCallCount.toFixed(2); // 保留两位小数
|
||
};
|
||
|
||
function Pie() {
|
||
let dataArr = [];
|
||
for (var i = 0; i < 150; i++) {
|
||
if (i % 2 === 0) {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 50,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#00AFFF",
|
||
borderWidth: 0,
|
||
borderColor: "rgba(0,0,0,0)",
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 100,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(0,0,0,0)",
|
||
borderWidth: 0,
|
||
borderColor: "rgba(0,0,0,0)"
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
return dataArr
|
||
}
|
||
function buildOptions(usedData){
|
||
let options = {
|
||
backgroundColor: 'transparent', // 画布背景色
|
||
series: [
|
||
{
|
||
// value: 50, // 内容 配合formatter
|
||
type: 'liquidFill',
|
||
radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
|
||
center: ['50%', '50%'],
|
||
data: [usedData, {
|
||
value: usedData,
|
||
direction: 'left', //波浪方向
|
||
}], // data个数代表波浪数
|
||
backgroundStyle: {
|
||
borderWidth: 1,
|
||
color: 'rgba(62, 208, 255, 1)' // 球体本景色
|
||
},
|
||
amplitude: '6 %',//波浪的振幅
|
||
// 修改波浪颜色
|
||
// color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
|
||
color: [{
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: '#6CDEFC',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: '#429BF7',
|
||
},
|
||
],
|
||
globalCoord: false,
|
||
},
|
||
],
|
||
label: {
|
||
normal: {
|
||
formatter: (usedData * 100).toFixed(2)+'%',
|
||
// formatter: function(params){
|
||
// return params.value* 100 + " \n%";
|
||
// },
|
||
rich: {
|
||
d: {
|
||
fontSize: 20,
|
||
}
|
||
},
|
||
textStyle: {
|
||
fontSize: 32,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
|
||
},
|
||
outline: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
type: 'pie',
|
||
z: 1,
|
||
center: ['50%', '50%'],
|
||
radius: ['72%', '73.5%'], // 控制外圈圆的粗细
|
||
hoverAnimation: false,
|
||
data: [
|
||
{
|
||
name: '',
|
||
value: 500,
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
itemStyle: {
|
||
color: '#00AFFF'
|
||
},
|
||
emphasis: {
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
itemStyle: {
|
||
color: '#00AFFF'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{ //外发光
|
||
type: 'pie',
|
||
z: 1,
|
||
zlevel: -1,
|
||
radius: ['70%', '90.5%'],
|
||
center: ["50%", "50%"],
|
||
hoverAnimation: false,
|
||
clockWise: false,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 20,
|
||
color: 'rgba(224,242,255,1)',
|
||
}
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
data: [100]
|
||
},
|
||
{ //底层外发光
|
||
type: 'pie',
|
||
z:1,
|
||
zlevel: -2,
|
||
radius: ['70%', '100%'],
|
||
center: ["50%", "50%"],
|
||
hoverAnimation: false,
|
||
clockWise: false,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 20,
|
||
color: 'rgba(224,242,255,.4)',
|
||
}
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
data: [100]
|
||
},
|
||
// 虚点
|
||
{
|
||
type: 'pie',
|
||
zlevel: 0,
|
||
silent: true,
|
||
radius: ['78%', '80%'],
|
||
z: 1,
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
data: Pie()
|
||
},
|
||
]
|
||
}
|
||
return options
|
||
}
|
||
</script>
|
||
<style>
|
||
.leftMargin {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.operate {
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.box-card {
|
||
border-radius: 4px;
|
||
border: 1px solid var(--el-border-color-lighter);
|
||
}
|
||
:deep(.el-card__header) {
|
||
padding: 12px 20px;
|
||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
background-color: var(--el-bg-color);
|
||
}
|
||
|
||
:deep(.el-card__body) {
|
||
height: 130px !important;
|
||
padding: 0px 15px 15px 15px !important;
|
||
}
|
||
.overview-content {
|
||
height: calc(100% - 21px);
|
||
display: flex;
|
||
padding: 0px 20px;
|
||
|
||
.stat-items {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
min-width: 80px;
|
||
|
||
h2 {
|
||
font-size: 45px;
|
||
color: var(--el-color-primary);
|
||
margin-bottom: 6px;
|
||
font-family: yjsz;
|
||
font-weight: 400;
|
||
margin-top: 0px;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 20px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
white-space: nowrap;
|
||
|
||
span {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
:deep(.el-pagination) {
|
||
margin: 0;
|
||
padding: 0;
|
||
|
||
.el-pagination__jump {
|
||
display: none;
|
||
}
|
||
|
||
.btn-prev,
|
||
.btn-next {
|
||
min-width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
.el-pager {
|
||
li {
|
||
min-width: 22px;
|
||
height: 22px;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.labelTitle{
|
||
text-align: center;
|
||
display: flex; justify-content: center;
|
||
span {
|
||
font-size: 16px;
|
||
color: #666;
|
||
}
|
||
}
|
||
.bottomArea{
|
||
margin-top: 10px;
|
||
}
|
||
</style> |