feat: 页面更新
JINGYJ
2 years ago
parent
4587d9bdda
commit
3347a16caa
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 533 KiB After Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 367 B |
Binary file not shown.
|
After Width: | Height: | Size: 382 B |
Binary file not shown.
|
After Width: | Height: | Size: 397 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 417 B |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@ -0,0 +1,9 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.66675 8.33333C4.66675 6.4924 6.15915 5 8.00008 5C9.84101 5 11.3334 6.4924 11.3334 8.33333V13.6667H4.66675V8.33333Z" stroke="#333333" stroke-linejoin="round"/>
|
||||
<path d="M8 1.66667V2.66667" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.9638 3.10941L11.321 3.87546" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.073 6.76244L13.0881 6.9361" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1.927 6.76247L2.91181 6.9361" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.03613 3.10934L4.67893 3.8754" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2 13.6667H14.3333" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 893 B |
@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2.5" y="2.5" width="11" height="9.28572" rx="1.5" stroke="#333333"/>
|
||||
<path d="M4.57153 14H11.4287" stroke="#333333" stroke-linecap="round"/>
|
||||
<path d="M7.07728 4.90192L8.92258 4.90192C9.10121 4.90192 9.26628 4.99722 9.35559 5.15192L10.2782 6.74999C10.3676 6.90469 10.3676 7.09529 10.2782 7.24999L9.35559 8.84807C9.26628 9.00277 9.10121 9.09807 8.92258 9.09807L7.07728 9.09807C6.89865 9.09807 6.73359 9.00277 6.64427 8.84807L5.72162 7.24999C5.6323 7.09529 5.6323 6.90469 5.72162 6.74999L6.64427 5.15192C6.73359 4.99722 6.89865 4.90192 7.07728 4.90192Z" stroke="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 682 B |
@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.66675 13.3333C2.66675 12 2.66675 4.33333 2.66675 4.33333C2.66675 3.22876 3.62188 2.33333 4.80008 2.33333H13.3334V12C13.3334 12 6.66058 12 4.80008 12C3.12083 12 2.66675 12.2281 2.66675 13.3333Z" stroke="#333333" stroke-linejoin="round"/>
|
||||
<path d="M5 9L7.66667 6.33333L9 8.66667L11.6667 6" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00008 14.6667H13.3334V12H4.00008C3.2637 12 2.66675 12.597 2.66675 13.3333C2.66675 14.0697 3.2637 14.6667 4.00008 14.6667Z" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 710 B |
@ -0,0 +1,4 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.26175 2.65666L3.11758 5.10666C2.59258 5.51499 2.16675 6.38416 2.16675 7.04333V11.3658C2.16675 12.7192 3.26925 13.8275 4.62258 13.8275H11.3776C12.7309 13.8275 13.8334 12.7192 13.8334 11.3717V7.12499C13.8334 6.41916 13.3609 5.51499 12.7834 5.11249L9.17842 2.58666C8.36175 2.01499 7.04925 2.04416 6.26175 2.65666Z" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8 11.4942V9.74417" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 588 B |
@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 10.9382V5.6618C3 5.58747 3.07823 5.53912 3.14472 5.57236L6.94472 7.47236C6.9786 7.4893 7 7.52393 7 7.5618V12.8382C7 12.9125 6.92177 12.9609 6.85528 12.9276L3.05528 11.0276C3.0214 11.0107 3 10.9761 3 10.9382Z" stroke="#333333"/>
|
||||
<path d="M13 10.9382V5.6618C13 5.58747 12.9218 5.53912 12.8553 5.57236L9.05528 7.47236C9.0214 7.4893 9 7.52393 9 7.5618V12.8382C9 12.9125 9.07823 12.9609 9.14472 12.9276L12.9447 11.0276C12.9786 11.0107 13 10.9761 13 10.9382Z" stroke="#333333"/>
|
||||
<path d="M7.95939 2.01805L3.70561 3.90862C3.62643 3.94381 3.62643 4.05619 3.70561 4.09138L7.95939 5.98195C7.98524 5.99344 8.01476 5.99344 8.04061 5.98195L12.2944 4.09138C12.3736 4.05619 12.3736 3.94381 12.2944 3.90862L8.04061 2.01805C8.01476 2.00656 7.98524 2.00656 7.95939 2.01805Z" stroke="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 891 B |
@ -0,0 +1,8 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.4333 3H3.23325C2.7362 3 2.33325 3.40294 2.33325 3.9V12.9C2.33325 13.3971 2.7362 13.8 3.23325 13.8H13.4333C13.9303 13.8 14.3333 13.3971 14.3333 12.9V3.9C14.3333 3.40294 13.9303 3 13.4333 3Z" stroke="#1C0D82" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2.33325 5.39999H14.3333" stroke="#1C0D82" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.1333 8.39999H11.9333" stroke="#1C0D82" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.1333 10.8H11.9333" stroke="#1C0D82" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.73315 8.39999H5.33315" stroke="#1C0D82" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.73315 10.8H5.33315" stroke="#1C0D82" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 869 B |
@ -0,0 +1,20 @@
|
||||
import Alarm from "@/assets/svg/alarm.svg?component";
|
||||
export default {
|
||||
path: "/warning",
|
||||
meta: {
|
||||
title: "告警管理",
|
||||
icon: Alarm,
|
||||
rank: 14
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/warning/list/index",
|
||||
name: "WarningList",
|
||||
component: () => import("@/views/warning/list/index.vue"),
|
||||
meta: {
|
||||
title: "告警列表",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
}
|
||||
]
|
||||
} as RouteConfigsTable;
|
||||
@ -0,0 +1,29 @@
|
||||
import Project from "@/assets/svg/project.svg?component";
|
||||
export default {
|
||||
path: "/project",
|
||||
meta: {
|
||||
title: "项目管理",
|
||||
icon: Project,
|
||||
rank: 11
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/project/list/index",
|
||||
name: "ProjectList",
|
||||
component: () => import("@/views/project/list/index.vue"),
|
||||
meta: {
|
||||
title: "项目列表",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/project/details/index",
|
||||
name: "ProjectDetails",
|
||||
component: () => import("@/views/project/details/index.vue"),
|
||||
meta: {
|
||||
title: "项目详情",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
}
|
||||
]
|
||||
} as RouteConfigsTable;
|
||||
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "AlgorithmTesting"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>算法实测</h1>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,5 +1,7 @@
|
||||
import bg from "@/assets/login/bg.png";
|
||||
import leftLogo from "@/assets/login/leftLogo.png";
|
||||
import sst from "@/assets/login/sst.png";
|
||||
import avatar from "@/assets/login/avatar.svg?component";
|
||||
import illustration from "@/assets/login/illustration.svg?component";
|
||||
|
||||
export { bg, avatar, illustration };
|
||||
export { bg, avatar, illustration, leftLogo, sst };
|
||||
|
||||
@ -0,0 +1,163 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import { FormInstance } from "element-plus";
|
||||
|
||||
// const SELECT_OPTIONS = [
|
||||
// { label: "网关", value: 1 },
|
||||
// { label: "人工智能", value: 2 },
|
||||
// { label: "CVM", value: 3 },
|
||||
// { label: "防火墙", value: 4 },
|
||||
// { label: "未知", value: 5 }
|
||||
// ];
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
|
||||
const formVisible = ref(false);
|
||||
const formData = ref(props.data);
|
||||
// const textareaValue = ref("");
|
||||
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate(valid => {
|
||||
if (valid) {
|
||||
message("提交成功", { type: "success" });
|
||||
formVisible.value = false;
|
||||
resetForm(formEl);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
formVisible.value = false;
|
||||
resetForm(ruleFormRef.value);
|
||||
};
|
||||
|
||||
const emit = defineEmits(["update:visible"]);
|
||||
watch(
|
||||
() => formVisible.value,
|
||||
val => {
|
||||
emit("update:visible", val);
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
val => {
|
||||
formVisible.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
val => {
|
||||
formData.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: "请输入产品名称", trigger: "blur" }]
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="formVisible"
|
||||
title="新建项目"
|
||||
:width="680"
|
||||
draggable
|
||||
:before-close="closeDialog"
|
||||
>
|
||||
<!-- 表单内容 -->
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="项目名称" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入项目名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目负责人" prop="leader">
|
||||
<el-input
|
||||
v-model="formData.leader"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入项目负责人"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" prop="phone">
|
||||
<el-input
|
||||
v-model="formData.phone"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入联系方式"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="产品状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio label="0">已停用</el-radio>
|
||||
<el-radio label="1">已启用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="项目简介" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
type="textarea"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入项目简介"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="产品类型" prop="type">
|
||||
<el-select
|
||||
v-model="formData.type"
|
||||
clearable
|
||||
:style="{ width: '480px' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in SELECT_OPTIONS"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="mark">
|
||||
<el-input
|
||||
v-model="textareaValue"
|
||||
type="textarea"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="closeDialog">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@ -0,0 +1,208 @@
|
||||
<script setup lang="ts">
|
||||
import Card from "./components/Card.vue";
|
||||
import { getCardList } from "@/api/list";
|
||||
import { message } from "@/utils/message";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import dialogForm from "./components/DialogForm.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { isString } from "@pureadmin/utils";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
// import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
// import Search from "@iconify-icons/ep/search";
|
||||
// import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "MyAlgorithm"
|
||||
});
|
||||
|
||||
const svg = `
|
||||
<path class="path" d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
||||
`;
|
||||
|
||||
const INITIAL_DATA = {
|
||||
name: "",
|
||||
status: "",
|
||||
description: "",
|
||||
type: "",
|
||||
mark: "",
|
||||
leader: "",
|
||||
phone: ""
|
||||
};
|
||||
|
||||
const pagination = ref({ current: 1, pageSize: 12, total: 0 });
|
||||
|
||||
const productList = ref([]);
|
||||
const dataLoading = ref(true);
|
||||
|
||||
const getCardListData = async () => {
|
||||
try {
|
||||
const { data } = await getCardList();
|
||||
productList.value = data.list;
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
total: data.list.length
|
||||
};
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
dataLoading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getCardListData();
|
||||
});
|
||||
|
||||
const formDialogVisible = ref(false);
|
||||
const formData = ref({ ...INITIAL_DATA });
|
||||
const searchValue = ref("");
|
||||
|
||||
const onPageSizeChange = (size: number) => {
|
||||
pagination.value.pageSize = size;
|
||||
pagination.value.current = 1;
|
||||
};
|
||||
const onCurrentChange = (current: number) => {
|
||||
pagination.value.current = current;
|
||||
};
|
||||
const handleDeleteItem = product => {
|
||||
ElMessageBox.confirm(
|
||||
product
|
||||
? `确认删除后${product.name}的所有产品信息将被清空, 且无法恢复`
|
||||
: "",
|
||||
"提示",
|
||||
{
|
||||
type: "warning"
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
message("删除成功", { type: "success" });
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
const handleManageProduct = product => {
|
||||
formDialogVisible.value = true;
|
||||
nextTick(() => {
|
||||
formData.value = { ...product, status: product?.isSetup ? "1" : "0" };
|
||||
});
|
||||
};
|
||||
const router = useRouter();
|
||||
const handleProductDetail = product => {
|
||||
Object.keys(product).forEach(param => {
|
||||
if (!isString(product[param])) {
|
||||
product[param] = product[param].toString();
|
||||
}
|
||||
});
|
||||
// 保存信息到标签页
|
||||
useMultiTagsStoreHook().handleTags("push", {
|
||||
path: `/project/details`,
|
||||
name: "ProjectDetails",
|
||||
query: product,
|
||||
meta: {
|
||||
title: `项目详情`,
|
||||
showLink: false
|
||||
}
|
||||
});
|
||||
router.push({ name: "ProjectDetails", query: product });
|
||||
// formDialogVisible.value = true;
|
||||
// nextTick(() => {
|
||||
// formData.value = { ...product, status: product?.isSetup ? "1" : "0" };
|
||||
// });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- <div class="w-full flex justify-between mb-4">
|
||||
<el-button
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="formDialogVisible = true"
|
||||
>
|
||||
新建项目
|
||||
</el-button>
|
||||
<el-input
|
||||
style="width: 300px"
|
||||
v-model="searchValue"
|
||||
placeholder="请输入项目名称"
|
||||
clearable
|
||||
v-if="false"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="el-input__icon">
|
||||
<IconifyIconOffline
|
||||
v-show="searchValue.length === 0"
|
||||
:icon="Search"
|
||||
/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div> -->
|
||||
<div
|
||||
v-loading="dataLoading"
|
||||
:element-loading-svg="svg"
|
||||
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||
>
|
||||
<el-empty
|
||||
description="暂无数据"
|
||||
v-show="
|
||||
productList
|
||||
.slice(
|
||||
pagination.pageSize * (pagination.current - 1),
|
||||
pagination.pageSize * pagination.current
|
||||
)
|
||||
.filter(v =>
|
||||
v.name.toLowerCase().includes(searchValue.toLowerCase())
|
||||
).length === 0
|
||||
"
|
||||
/>
|
||||
<template v-if="pagination.total > 0">
|
||||
<el-row :gutter="16">
|
||||
<el-col
|
||||
v-for="(product, index) in productList
|
||||
.slice(
|
||||
pagination.pageSize * (pagination.current - 1),
|
||||
pagination.pageSize * pagination.current
|
||||
)
|
||||
.filter(v =>
|
||||
v.name.toLowerCase().includes(searchValue.toLowerCase())
|
||||
)"
|
||||
:key="index"
|
||||
:xs="48"
|
||||
:sm="36"
|
||||
:md="24"
|
||||
:lg="12"
|
||||
:xl="8"
|
||||
>
|
||||
<Card
|
||||
:product="product"
|
||||
@delete-item="handleDeleteItem"
|
||||
@manage-product="handleManageProduct"
|
||||
@product-detail="handleProductDetail"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-pagination
|
||||
class="float-right"
|
||||
v-model:currentPage="pagination.current"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[12, 24, 36]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="onPageSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<dialogForm v-model:visible="formDialogVisible" :data="formData" />
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,167 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, type Ref } from "vue";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import {
|
||||
delay,
|
||||
useDark,
|
||||
useECharts,
|
||||
type EchartOptions
|
||||
} from "@pureadmin/utils";
|
||||
import * as echarts from "echarts/core";
|
||||
|
||||
const { isDark } = useDark();
|
||||
|
||||
const theme: EchartOptions["theme"] = computed(() => {
|
||||
return isDark.value ? "dark" : "light";
|
||||
});
|
||||
|
||||
const barChartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
|
||||
theme
|
||||
});
|
||||
|
||||
setOptions(
|
||||
{
|
||||
title: {
|
||||
text: "缺陷监测数据",
|
||||
left: "left",
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
bottom: "20px",
|
||||
right: "30px",
|
||||
left: "40px"
|
||||
},
|
||||
// legend: {
|
||||
// //@ts-expect-error
|
||||
// right: true,
|
||||
// // data: ["star"]
|
||||
// // data: ["watchers", "fork", "star"]
|
||||
// },
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
// width: "70",
|
||||
// overflow: "truncate"
|
||||
},
|
||||
data: ["10.15", "10.16", "10.17", "10.18", "10.19"],
|
||||
triggerEvent: true
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
triggerEvent: true
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: false
|
||||
},
|
||||
triggerEvent: true
|
||||
}
|
||||
],
|
||||
series: [
|
||||
// {
|
||||
// name: "watchers",
|
||||
// type: "bar",
|
||||
// barWidth: "10%",
|
||||
// itemStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#e6a23c"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "#eebe77"
|
||||
// }
|
||||
// ])
|
||||
// },
|
||||
// data: [200, 320, 800]
|
||||
// },
|
||||
// {
|
||||
// name: "fork",
|
||||
// type: "bar",
|
||||
// barWidth: "15%",
|
||||
// itemStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#f56c6c"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "#f89898"
|
||||
// }
|
||||
// ])
|
||||
// },
|
||||
// data: [1600, 2460, 4500]
|
||||
// },
|
||||
{
|
||||
name: "star",
|
||||
type: "bar",
|
||||
barWidth: "20%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#F7B303"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#F7B303"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [3620, 7500, 1450, 3620, 7500]
|
||||
},
|
||||
{
|
||||
//折线(右边数据)
|
||||
name: "总量",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
data: [160, 246, 450, 160, 246],
|
||||
itemStyle: {
|
||||
//折线颜色
|
||||
color: "#0246F6"
|
||||
}
|
||||
}
|
||||
],
|
||||
addTooltip: true
|
||||
},
|
||||
{
|
||||
name: "click",
|
||||
callback: params => {
|
||||
console.log("click", params);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => useAppStoreHook().getSidebarStatus,
|
||||
() => {
|
||||
delay(600).then(() => resize());
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="barChartRef" style="width: 100%; height: 35vh" />
|
||||
</template>
|
||||
@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, type Ref } from "vue";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import {
|
||||
delay,
|
||||
useDark,
|
||||
useECharts,
|
||||
type EchartOptions
|
||||
} from "@pureadmin/utils";
|
||||
|
||||
const { isDark } = useDark();
|
||||
|
||||
const theme: EchartOptions["theme"] = computed(() => {
|
||||
return isDark.value ? "dark" : "light";
|
||||
});
|
||||
|
||||
const pieChartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
|
||||
theme
|
||||
});
|
||||
|
||||
setOptions(
|
||||
{
|
||||
title: {
|
||||
text: "算力占用",
|
||||
left: "left",
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
icon: "rect",
|
||||
// orient: "vertical",
|
||||
align: "auto",
|
||||
bottom: "0",
|
||||
// top: "40%",
|
||||
// right: "15%",
|
||||
// itemGap: 18,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#333"
|
||||
}
|
||||
// right: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "算力占用",
|
||||
type: "pie",
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "55%"],
|
||||
color: ["#6217DE", "#FF4444"],
|
||||
itemStyle: {
|
||||
borderColor: "#fff",
|
||||
borderWidth: 1
|
||||
},
|
||||
data: [
|
||||
{ value: 1600, name: "已占用" },
|
||||
{ value: 400, name: "未占用" }
|
||||
]
|
||||
// emphasis: {
|
||||
// itemStyle: {
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||
// }
|
||||
// }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "click",
|
||||
callback: params => {
|
||||
console.log("click", params);
|
||||
}
|
||||
},
|
||||
// 点击空白处
|
||||
{
|
||||
type: "zrender",
|
||||
name: "click",
|
||||
callback: params => {
|
||||
console.log("点击空白处", params);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => useAppStoreHook().getSidebarStatus,
|
||||
() => {
|
||||
delay(600).then(() => resize());
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="pieChartRef" style="width: 100%; height: 35vh" />
|
||||
</template>
|
||||
Loading…
Reference in New Issue