ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录页面样式&检测计划样式修改

Browse Source
This commit is contained in:
zhujiyan
2024-08-23 16:51:49 +08:00
parent d0aaa24f90
commit 531ec04f8d
11 changed files with 170 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/api/plan/static.ts
View File

@@ -1,7 +1,7 @@
import http from "@/api";
export const getStaticTreeData = (data: any) => {
return http.post<Static.planData>(
"http://127.0.0.1:4523/m1/2573730-0-default/plan/static/planData",
"http://192.168.1.123:4523/m1/2573730-0-default/plan/static/planData",
data,
{ loading: false }
); // 正常 post json 请求 ==> application/json

41
frontend/src/components/echarts/pie/default.vue
View File

@@ -1,9 +1,16 @@
<!-- 默认饼图 -->
<template>
<div class="charts" ref="chartsRef"></div>
<div class="pie" ref="chartsRef"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineProps, defineExpose, watch } from "vue";
import {
ref,
onMounted,
defineProps,
defineExpose,
watch,
onUnmounted,
} from "vue";
import * as echarts from "echarts";
const chartsRef = ref();
const props = defineProps({
@@ -26,7 +33,6 @@ const props = defineProps({
const customData: any = ref({}),
legendData: any = ref({});
const init = () => {
console.log("init", props.customData);
customData.value = {
title: "", //标题
textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
@@ -41,6 +47,7 @@ const init = () => {
icon: "roundRect", // 图例项的icon,类型包括 circle(圆形),rect(正方形),//roundRect(圆角正方形),triangle(三角形),diamond(菱形),//pin(大头针行),arrow(箭头形),none(无图例项的icon)
orient: "vertical", //图例排列方向
left: "right", //可选属性left,right,top,bottom,可选属性值 left,right,top,bottom,px,百分比,数值,
itemGap: 0, // 设置图例项之间的间隔为20
...props.legendData,
};
var chart = chartsRef.value && echarts.init(chartsRef.value);
@@ -61,8 +68,10 @@ const init = () => {
type: "pie",
radius: customData.value.isRing ? ["45", "65"] : "65%",
data: props.chartsData,
center: ["50%", "60%"], // 设置饼图的中心位置
center: ["55%", "50%"], // 设置饼图的中心位置
// padAngle: 2,
minAngle: 15, //最小角度
startAngle: 270, //起始角度
emphasis: {
itemStyle: {
shadowBlur: 10,
@@ -82,8 +91,27 @@ const init = () => {
],
};
option && chart.setOption(option);
setTimeout(() => {
chart.resize();
}, 0);
};
const resizeCharts = () => {
var chart = chartsRef.value && echarts.init(chartsRef.value);
if (chart) {
chart.resize();
}
};
window.addEventListener("resize", resizeCharts);
onUnmounted(() => {
var chart = chartsRef.value && echarts.init(chartsRef.value);
if (chart) {
chart.resize();
}
window.removeEventListener("resize", resizeCharts);
if (chart) {
chart.dispose();
}
});
watch(
() => props.chartsData,
(val, oldVal) => {
@@ -101,9 +129,10 @@ onMounted(() => {
defineExpose({ init });
</script>
<style lang="scss" scoped>
.charts {
.pie {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
</style>

4
frontend/src/layouts/LayoutVertical/index.scss
View File

@@ -1,6 +1,8 @@
.el-container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
:deep(.el-aside) {
width: auto;
background-color: var(--el-menu-bg-color);
@@ -14,7 +16,7 @@
height: calc(100% - 55px);
.el-menu {
width: 100%;
overflow-x: hidden;
// overflow-x: hidden;
border-right: none;
}
}

4
frontend/src/styles/element.scss
View File

@@ -257,3 +257,7 @@
}
}
}
.el-form-item{
margin-right: 10px !important;
}

36
frontend/src/views/home/components/tree.vue
View File

@@ -4,14 +4,18 @@
placeholder="请输入计划名称"
v-model="searchForm.planName"
></el-input>
<el-tree
:data="data"
ref="treeRef"
:filter-node-method="filterNode"
:props="defaultProps"
node-key="id"
@node-click="handleNodeClick"
/>
<div class="tree_container">
<el-tree
:data="data"
ref="treeRef"
:filter-node-method="filterNode"
:props="defaultProps"
node-key="id"
default-expand-all
@node-click="handleNodeClick"
>
</el-tree>
</div>
</div>
</template>
<script lang="ts" setup>
@@ -55,16 +59,20 @@ defineExpose({ getTreeData });
.plan_tree {
width: 200px;
height: 100%;
// display: flex;
// flex-direction: column;
display: flex;
flex-direction: column;
padding: 5px;
height: calc(100% - 70px);
.el-input {
width: 100%;
// height: 40px;
margin:0 10px 10px 0;
margin: 0 10px 10px 0;
}
.el-tree {
height: calc(100% - 70px);
.tree_container {
flex: 1;
overflow-y: auto;
.el-tree {
height: 100%;
}
}
}
</style>

158
frontend/src/views/home/index.vue
View File

@@ -79,162 +79,8 @@ onMounted(() => {
});
</script>
<style lang="scss" scoped>
.main_container {
.home{
width: 100%;
height: calc(100vh - 120px);
// overflow-y: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
// padding: 20px 2%;
.mode {
// width: 31.5%;
// height: 100%;
flex: none;
width: 32.5%;
height: 100%;
border: 1px solid #eee;
display: flex;
flex-direction: column;
align-items: center;
// justify-content: space-around;
background: #fff;
border-radius: 6px;
margin-bottom: 20px;
background: linear-gradient(
180deg,
rgba(0, 153, 255, 1) 0%,
rgba(0, 153, 255, 1) 0%,
rgba(0, 102, 255, 1) 65%,
rgba(0, 51, 255, 1) 100%,
rgba(0, 51, 255, 1) 100%
);
// padding: 40px 0;
.mode_top {
width: 100%;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
background: #008aff;
border-radius: 6px 6px 0 0;
.mode_name {
width: 100%;
height: 40px;
flex: 1;
display: flex;
align-items: center;
justify-content: flex-start;
p {
font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
color: #ffffff;
text-align: center;
// background: #fff;
line-height: 40px;
text-align: left;
padding-left: 10px;
// margin-top: 20px;
}
.mode_subName {
font-family: "微软雅黑", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #ffffff;
line-height: 40px;
text-align: center;
padding: 5px 0 0 10px;
// margin-top: 10px;
}
}
.test_button {
width: 150px;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 5px;
}
}
.mode_img {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
// padding: 30px 0 50px;
margin-top: 100px;
img:nth-child(1) {
width: 60%;
height: auto;
display: block;
}
img:nth-child(2) {
width: 70%;
height: auto;
display: block;
}
img:nth-child(3) {
width: 60%;
height: auto;
display: block;
}
}
.mode_test {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
margin-bottom: 20px;
.test_button {
width: 120px;
height: 100%;
border: 1px solid rgba(121, 121, 121, 1);
border-radius: 5px;
font-family: "微软雅黑", sans-serif;
font-weight: 400;
font-style: normal;
color: #fff;
line-height: 20px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.test_button:hover {
background: rgba(0, 0, 0, 0.2);
}
}
}
.mode:nth-child(3n + 3) {
background: linear-gradient(
180deg,
rgba(0, 153, 255, 1) 0%,
rgba(0, 153, 255, 1) 0%,
rgba(0, 102, 255, 1) 39%,
rgba(102, 51, 204, 1) 100%,
rgba(102, 51, 204, 1) 100%
);
}
.mode_off {
.mode_name,
.mode_subName,
.test_button {
color: #fff !important;
}
.test_button:hover {
// background: rgba(0, 0, 0, 0.2) !important;
cursor: pointer;
}
}
}
::v-deep .el-sub-menu__title {
border-bottom: 0 !important;
outline: none !important;
height: 100%;
}
</style>

147
frontend/src/views/home/tabs/dashboard.vue
View File

@@ -6,6 +6,50 @@
</div>
<!-- <span class="new_span">测试scss颜色</span> -->
<div class="right_container">
<div class="container_charts">
<div class="charts_info">
<pie
:customData="{
title: '检测状态',
textAlign: 'right',
}"
:legendData="{
icon: 'circle',
left: 'left',
}"
:chartsData="chartsData1"
ref="pieRef1"
></pie>
</div>
<div class="charts_info">
<pie
:customData="{
title: '检测结果',
textAlign: 'right',
}"
:legendData="{
icon: 'circle',
left: 'left',
}"
:chartsData="chartsData2"
ref="pieRef2"
></pie>
</div>
<div class="charts_info">
<pie
:customData="{
title: '报告状态',
textAlign: 'right',
}"
:legendData="{
icon: 'circle',
left: 'left',
}"
:chartsData="chartsData3"
ref="pieRef3"
></pie>
</div>
</div>
<div class="container_title">
<el-form :model="form" label-width="80px" :inline="true">
<el-form-item label="功能选择">
@@ -80,10 +124,16 @@
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
<el-button type="primary" @click="handleDetection" v-if="form.activeTabs === 0"
<el-button
type="primary"
@click="handleDetection"
v-if="form.activeTabs === 0"
>启动自动检测</el-button
>
<el-button type="primary" @click="handleDetection" v-if="form.activeTabs === 1"
<el-button
type="primary"
@click="handleDetection"
v-if="form.activeTabs === 1"
>启动手动检测</el-button
>
<el-button type="primary" v-if="form.activeTabs === 2"
@@ -92,47 +142,11 @@
<el-button type="primary" v-if="form.activeTabs === 5"
>设备导入</el-button
>
<el-button type="primary">计划详情</el-button>
</el-form-item>
</el-form>
</div>
<div class="container_charts">
<div class="charts_info">
<pie
:customData="{
title: '检测状态',
}"
:legendData="{
icon: 'circle',
}"
:chartsData="chartsData1"
ref="pieRef1"
></pie>
</div>
<div class="charts_info">
<pie
:customData="{
title: '检测结果',
}"
:legendData="{
icon: 'circle',
}"
:chartsData="chartsData2"
ref="pieRef2"
></pie>
</div>
<div class="charts_info">
<pie
:customData="{
title: '报告状态',
}"
:legendData="{
icon: 'circle',
}"
:chartsData="chartsData3"
ref="pieRef3"
></pie>
</div>
</div>
<div class="container_table">
<Table></Table>
</div>
@@ -143,7 +157,7 @@
import { ref, onMounted } from "vue";
import { getStaticTreeData } from "@/api/plan/static";
import pie from "@/components/echarts/pie/default.vue";
import {useRouter} from 'vue-router'
import { useRouter } from "vue-router";
import tree from "../components/tree.vue";
import Table from "../components/table.vue";
const treeRef = ref();
@@ -156,7 +170,7 @@ const form: any = ref({
deviceType: 0, //设备类型
manufacturer: 0, //制造厂商
});
const router=useRouter()
const router = useRouter();
localStorage.setItem("color", "red");
//功能选择数据
const tabsList = [
@@ -306,28 +320,26 @@ const getPieData = () => {
{ value: Math.floor(Math.random() * 100) + 1, name: "合格" },
{ value: Math.floor(Math.random() * 100) + 1, name: "不合格" },
];
// pieRef2.value.init();
chartsData3.value = [
{ value: Math.floor(Math.random() * 100) + 1, name: "已生成报告" },
{ value: Math.floor(Math.random() * 100) + 1, name: "未生成报告" },
];
// pieRef3.value.init();
pieRef1.value.init();
pieRef2.value.init();
pieRef3.value.init();
};
const getTree = () => {
getStaticTreeData({ userName: 'zhangsan', planName: "111" }).then(
(res) => {
console.log(res, "99999999");
treeRef.value.getTreeData(res.data);
}
);
getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
console.log(res, "99999999");
treeRef.value.getTreeData(res.data);
});
};
//前往检测
const handleDetection=()=>{
const handleDetection = () => {
router.push({
path:"/detection"
})
}
path: "/detection",
});
};
onMounted(() => {
console.log();
getTree();
@@ -342,51 +354,55 @@ onMounted(() => {
justify-content: space-between;
background-color: #eee;
.left_tree {
width: 200px;
width: auto;
height: 100%;
background-color: #fff;
}
.right_container {
flex: 1;
// width: 100%;
width: 100%;
padding: 0 10px 0 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.container_title {
width: 100%;
// min-height: 50px;
min-height: 100px;
// min-height: 60px;
height: auto !important;
background: #fff;
// padding-left: 20px;
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 10px;
border-radius: 4px;
padding: 10px;
box-sizing: border-box;
.el-form {
width: 100%;
.el-form-item {
// flex:1;
// margin: 0 !important;
// margin:10px 10px 10px 0;
// display: flex;
.el-button {
margin: 0 10px;
}
}
}
::v-deep .el-form-item {
margin-bottom: 8px !important;
}
}
.container_charts {
width: 100%;
height: 300px;
height: 350px;
// border: 2px solid green;
background-color: #eee;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.charts_info {
flex: none;
width: 32.9%;
height: 100%;
height: 100% !important;
// border: 2px solid pink;
background-color: #fff;
border-radius: 4px;
@@ -395,7 +411,6 @@ onMounted(() => {
.container_table {
width: 100%;
height: 100%;
margin-top: 10px;
border-radius: 4px;
}
}

2
frontend/src/views/home/tabs/model.vue
View File

@@ -21,7 +21,7 @@
size="small"
type="primary"
@click="handelOpen(item.isActive)"
>进入检测</el-button
:disabled="item.isActive==false">进入检测</el-button
>
</div>
</div>

20
frontend/src/views/login/components/LoginForm.vue
View File

@@ -6,7 +6,7 @@
size="large"
>
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="用户名：admin / user">
<el-input v-model="loginForm.username" placeholder="用户名">
<template #prefix>
<el-icon class="el-input__icon">
<user />
@@ -18,7 +18,7 @@
<el-input
v-model="loginForm.password"
type="password"
placeholder="密码：123456"
placeholder="密码"
show-password
autocomplete="new-password"
>
@@ -31,14 +31,6 @@
</el-form-item>
</el-form>
<div class="login-btn">
<el-button
:icon="CircleClose"
round
size="large"
@click="resetForm(loginFormRef)"
>
重置
</el-button>
<el-button
:icon="UserFilled"
round
@@ -49,6 +41,14 @@
>
登录
</el-button>
<el-button
:icon="CircleClose"
round
size="large"
@click="resetForm(loginFormRef)"
>
重置
</el-button>
</div>
</template>

10
frontend/src/views/login/index.scss
View File

@@ -1,7 +1,8 @@
.login-container {
height: 100%;
min-height: 550px;
background-color: #eeeeee;
// background-color: #eeeeee;
background-color: #003078;
background-image: url("@/assets/images/login_bg.svg");
background-size: 100% 100%;
background-size: cover;
@@ -14,7 +15,7 @@
width: 96.5%;
height: 94%;
padding: 0 50px;
background-color: rgb(255 255 255 / 80%);
// background-color: rgb(255 255 255 / 80%);
border-radius: 10px;
.dark {
position: absolute;
@@ -40,14 +41,15 @@
align-items: center;
justify-content: center;
margin-bottom: 45px;
padding: 0 20px;
.login-icon {
width: 60px;
height: 52px;
height: auto;
}
.logo-text {
padding: 0 0 0 25px;
margin: 0;
font-size: 42px;
font-size: 32px;
font-weight: bold;
color: #34495e;
white-space: nowrap;

8
frontend/src/views/login/index.vue
View File

@@ -1,14 +1,15 @@
<template>
<div class="login-container flx-center">
<div class="login-box">
<SwitchDark class="dark" />
<!-- <SwitchDark class="dark" /> -->
<div class="login-left">
<img class="login-left-img" src="@/assets/images/login_left.png" alt="login" />
</div>
<div class="login-form">
<div class="login-logo">
<img class="login-icon" src="@/assets/images/logo.svg" alt="" />
<h2 class="logo-text">Geeker-Admin</h2>
<!-- <img class="login-icon" src="@/assets/images/logo.svg" alt="" /> -->
<img class="login-icon" src="@/assets/images/cn_pms9100_logo.png" alt="" />
<h2 class="logo-text">{{ title }}</h2>
</div>
<LoginForm />
</div>
@@ -19,6 +20,7 @@
<script setup lang="ts" name="login">
import LoginForm from "./components/LoginForm.vue";
import SwitchDark from "@/components/SwitchDark/index.vue";
const title = import.meta.env.VITE_GLOB_APP_TITLE;
</script>
<style scoped lang="scss">