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:
hongawen
2025-01-06 14:02:22 +08:00
parent c4e2da8d67
commit a4b96066e0
10 changed files with 302 additions and 1052 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/.env.development
View File

@@ -19,6 +19,6 @@ VITE_API_URL=/api
# 开发环境跨域代理，支持配置多个 # 开发环境跨域代理，支持配置多个
VITE_PROXY=[["/api","http://192.168.1.124:18092/"]] #VITE_PROXY=[["/api","http://192.168.1.124:18092/"]]
# VITE_PROXY=[["/api","http://192.168.1.125:18092/"]] VITE_PROXY=[["/api","http://192.168.1.125:18092/"]]
# VITE_PROXY=[["/api","http://192.168.1.138:8080/"]]张文 # VITE_PROXY=[["/api","http://192.168.1.138:8080/"]]张文

3
frontend/src/api/plan/plan.ts
View File

@@ -1,8 +1,5 @@
import type { ResPage } from '@/api/interface'
import type { Plan } from './interface' import type { Plan } from './interface'
import http from '@/api' import http from '@/api'
import type { TestSource } from '../device/interface/testSource'
import type { TestScript } from '../device/interface/testScript'
import type { ErrorSystem } from '../device/interface/error' import type { ErrorSystem } from '../device/interface/error'
import type { Device } from '../device/interface/device' import type { Device } from '../device/interface/device'

4
frontend/src/layouts/components/Main/index.scss
View File

@@ -1,7 +1,7 @@
.el-main { .el-main {
box-sizing: border-box; box-sizing: border-box;
padding: 20px;//主体padding padding: 15px;//主体padding
overflow-x: hidden; overflow: hidden;
background-color: var(--el-bg-color-page); background-color: var(--el-bg-color-page);
} }
.el-footer { .el-footer {

80
frontend/src/views/demo/proTable/doubleColumn.vue
View File

@@ -1,80 +0,0 @@
<!--双列-->
<template>
<el-dialog v-model='dialogVisible' :title='title' v-bind='dialogMiddle' >
<el-scrollbar>
<el-form :inline="false" label-width="auto" ref="formRef" class='form-two'>
<el-form-item label="姓名" prop="username" >
<el-input
></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-input
></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input
></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="id">
<el-input
></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
></el-input>
</el-form-item>
<el-form-item label="居住地址" prop="address">
<el-input
></el-input>
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input
></el-input>
</el-form-item>
<el-form-item label="来源" prop="source">
<el-input
></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<div class='dialog-footer'>
<el-button @click='close()'>取消</el-button>
<el-button type='primary' @click='confirmForm()'>确定</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang='ts'>
import { dialogMiddle } from '@/utils/elementBind'
const dialogVisible = ref(false)
const title = ref('单列弹出框')
const open = (textTitle: string) => {
dialogVisible.value = true
title.value = textTitle
}
const close = () => {
dialogVisible.value = false
}
const confirmForm = () => {
ElMessage.info('业务数据提交')
}
defineExpose({ open })
</script>
<style>
</style>

200
frontend/src/views/demo/proTable/index.vue
View File

@@ -1,200 +0,0 @@
<template>
<div class='table-box' ref='popupBaseView'>
<ProTable
ref='proTable'
:columns='columns'
:data='userData'
>
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增')">新增用户</el-button>
<el-button type='primary' :icon='Upload' plain @click='batchAdd'>批量添加用户</el-button>
<el-button type='primary' :icon='Download' plain @click='downloadFile'>导出用户数据</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
删除用户
</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='View'
@click="openDrawer('查看', scope.row)">查看
</el-button>
<el-button type='primary' link :icon='EditPen' @click="openDrawer('编辑', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Refresh' @click='resetPass(scope.row)'>重置密码</el-button>
<el-button type='primary' link :icon='CirclePlus' @click='deleteAccount()'>下钻</el-button>
</template>
</ProTable>
</div>
<single-column ref='singleColumn' />
<double-column ref='doubleColumn' />
<open :width='viewWidth' :height='viewHeight' ref='openView' />
</template>
<script setup lang='tsx' name='useProTable'>
import { ref, reactive } from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import { useAuthButtons } from '@/hooks/useAuthButtons'
import ProTable from '@/components/ProTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import { useDictStore } from '@/stores/modules/dict'
import SingleColumn from '@/views/demo/proTable/singleColumn.vue'
import Open from '@/views/demo/proTable/Open.vue'
import DoubleColumn from '@/views/demo/proTable/doubleColumn.vue'
import { useViewSize } from '@/hooks/useViewSize'
const { popupBaseView, viewWidth, viewHeight } = useViewSize()
const dictStore = useDictStore()
import {
getUserList,
deleteUser,
} from '@/api/user/user'
import { ElMessageBox } from 'element-plus'
const userData = userDataList
const singleColumn = ref()
const doubleColumn = ref()
const openView = ref()
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 })
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
return {
list: data.list,
total: data.total,
}
}
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params))
newParams.createTime && (newParams.startTime = newParams.createTime[0])
newParams.createTime && (newParams.endTime = newParams.createTime[1])
delete newParams.createTime
return getUserList(newParams)
}
// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons()
// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'username',
label: '姓名',
width: 120,
search: { el: 'input' },
},
{
prop: 'gender',
label: '性别',
// 字典数据（本地数据）
enum: dictStore.getDictData('sex'),
search: { el: 'select', props: { filterable: true } },
fieldNames: { label: 'label', value: 'code' },
},
{
prop: 'age',
label: '年龄',
search: {
// 自定义 search 显示内容
render: ({ searchParam }) => {
return (
<div class='flx-center'>
<el-input vModel_trim={searchParam.minAge} placeholder='最小年龄' />
<span class='mr10 ml10'>-</span>
<el-input vModel_trim={searchParam.maxAge} placeholder='最大年龄' />
</div>
)
},
},
},
{ prop: 'idCard', label: '身份证号' },
{ prop: 'email', label: '邮箱' },
{ prop: 'address', label: '居住地址', width: 120 },
{
prop: 'status',
label: '状态',
enum: dictStore.getDictData('status'),
search: { el: 'tree-select', props: { filterable: true } },
fieldNames: { label: 'userLabel', value: 'userStatus' },
render: scope => {
return (
<>
{BUTTONS.value.status ? (
<el-switch
model-value={scope.row.status}
active-text={scope.row.status ? '启用' : '禁用'}
active-value={1}
inactive-value={0}
onClick={() => changeStatus(scope.row)}
/>
) : (
<el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
)}
</>
)
},
},
{
prop: 'createTime',
label: '创建时间',
width: 180,
search: {
el: 'date-picker',
span: 1,
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
defaultValue: ['2024-11-12', '2024-12-12'],
},
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
])
// 下钻
const deleteAccount = async () => {
openView.value.open('测试弹出框')
}
// 批量删除用户信息
const batchDelete = async (id: string[]) => {
await useHandleData(deleteUser, { id }, '删除所选用户信息')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 重置用户密码
const resetPass = async (params: any) => {
// await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
// proTable.value?.getTableList()
doubleColumn.value.open('双列弹出框')
}
// 切换用户状态
const changeStatus = async (row: any) => {
// await useHandleData(changeUserStatus, {
// id: row.id,
// status: row.status == 1 ? 0 : 1,
// }, `切换【${row.username}】用户状态`)
proTable.value?.getTableList()
}
// 导出用户列表
const downloadFile = async () => {
}
// 批量添加用户
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
const params = {
title: '用户',
getTableList: proTable.value?.getTableList,
}
dialogRef.value?.acceptParams(params)
}
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<any> = {}) => {
singleColumn.value.open('单列弹出框')
}
</script>

177
frontend/src/views/demo/proTable/open.vue
View File

@@ -1,177 +0,0 @@
<!--单列-->
<template>
<el-dialog class='table-box'
v-model='dialogVisible'
top='114px'
:style="{height:height+'px',maxHeight:height+'px',overflow:'hidden'}"
:title='title'
:width='width'
:modal='false'>
<div class='table-box' :style="{height:(height-64)+'px',maxHeight:(height-64)+'px',overflow:'hidden'}">
<ProTable
ref='proTable'
:columns='columns'
:data='userData'
>
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增')">新增用户</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='View'
@click="openDrawer('查看', scope.row)">查看
</el-button>
<el-button type='primary' link :icon='EditPen' @click="openDrawer('编辑', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Refresh' @click='resetPass(scope.row)'>重置密码</el-button>
<el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
</template>
</ProTable>
</div>
</el-dialog>
</template>
<script setup lang='tsx'>
import { CirclePlus, Delete, EditPen, Refresh, View } from '@element-plus/icons-vue'
import ProTable from '@/components/ProTable/index.vue'
import { useHandleData } from '@/hooks/useHandleData'
import { useAuthButtons } from '@/hooks/useAuthButtons'
import { reactive } from 'vue'
import { ColumnProps } from '@/components/ProTable/interface'
import { User } from '@/api/user/interface'
import { useDictStore } from '@/stores/modules/dict'
const dictStore = useDictStore()
import {
changeUserStatus,
} from '@/api/user/user'
import userDataList from '@/api/user/userData'
const userData = userDataList
const proTable = ref()
const dialogVisible = ref(false)
const title = ref('单列弹出框')
const { BUTTONS } = useAuthButtons()
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'username',
label: '姓名',
width: 120,
search: { el: 'input' },
},
{
prop: 'gender',
label: '性别',
// 字典数据（本地数据）
enum: dictStore.getDictData('sex'),
search: { el: 'select', props: { filterable: true } },
fieldNames: { label: 'label', value: 'code' },
},
{
prop: 'age',
label: '年龄',
search: {
// 自定义 search 显示内容
render: ({ searchParam }) => {
return (
<div class='flx-center'>
<el-input vModel_trim={searchParam.minAge} placeholder='最小年龄' />
<span class='mr10 ml10'>-</span>
<el-input vModel_trim={searchParam.maxAge} placeholder='最大年龄' />
</div>
)
},
},
},
{ prop: 'idCard', label: '身份证号', search: { el: 'input' } },
{ prop: 'email', label: '邮箱' },
{ prop: 'address', label: '居住地址', width: 120 },
{
prop: 'status',
label: '状态',
enum: dictStore.getDictData('status'),
search: { el: 'tree-select', props: { filterable: true } },
fieldNames: { label: 'userLabel', value: 'userStatus' },
render: scope => {
return (
<>
{BUTTONS.value.status ? (
<el-switch
model-value={scope.row.status}
active-text={scope.row.status ? '启用' : '禁用'}
active-value={1}
inactive-value={0}
onClick={() => changeStatus(scope.row)}
/>
) : (
<el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
)}
</>
)
},
},
{
prop: 'createTime',
label: '创建时间',
width: 180,
search: {
el: 'date-picker',
span: 1,
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
defaultValue: ['2024-11-12', '2024-12-12'],
},
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
])
const open = (textTitle: string) => {
dialogVisible.value = true
title.value = textTitle
}
defineExpose({ open })
const props = defineProps({
width: {
type: Number,
default: 800,
},
height: {
type: Number,
default: 744,
},
})
// 切换用户状态
const changeStatus = async (row: User.ResUserList) => {
await useHandleData(changeUserStatus, {
id: row.id,
status: row.status == 1 ? 0 : 1,
}, `切换【${row.username}】用户状态`)
proTable.value?.getTableList()
}
// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
}
// 重置用户密码
const resetPass = async (params: User.ResUserList) => {
}
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
}
</script>
<style>
</style>

169
frontend/src/views/demo/proTable/singleColumn.vue
View File

@@ -1,169 +0,0 @@
<!--单列-->
<template>
<el-dialog v-model='dialogVisible' :title='title' v-bind='dialogSmall'>
<el-scrollbar>
<el-form
:model='form'
:inline='false'
label-width='auto'
ref='formRuleRef'
:rules='rules'
>
<el-form-item label='姓名' prop='username'>
<el-input
v-model='form.username'
placeholder='请输入姓名'
></el-input>
</el-form-item>
<el-form-item label='性别' prop='gender'>
<el-radio-group v-model='form.gender'>
<el-radio-button :label='0'>男</el-radio-button>
<el-radio-button :label='1'>女</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label='年龄' prop='age'>
<el-input
v-model='form.age'
placeholder='年龄'
></el-input>
</el-form-item>
<el-form-item label='身份证号' prop='idCard'>
<el-input
v-model='form.idCard'
placeholder='身份证号'
></el-input>
</el-form-item>
<el-form-item label='邮箱' prop='email'>
<el-input
v-model='form.email'
placeholder='邮箱'
></el-input>
</el-form-item>
<el-form-item label='居住地址' prop='address'>
<el-input
v-model='form.address'
placeholder='居住地址'
></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<div class='dialog-footer'>
<el-button @click='close()'>取消</el-button>
<el-button type='primary' @click='confirmForm()'>确定</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang='ts'>
import { dialogSmall } from '@/utils/elementBind'
import { FormInstance, FormItemRule } from 'element-plus'
interface userForm {
id?: string; //用户ID，作为唯一标识
username: string; //用户名
gender: number; // 性别
age: number; // 年龄
idCard: string; // 身份证
email: string; // 邮箱
address?: string; // 地址
}
const form: Ref<userForm> = ref({
username: '',
gender: 0,
age: 1,
idCard: '',
email: '',
})
const formRuleRef = ref<FormInstance>()
//定义校验规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
username: [{ required: true, message: '用户名必填！', trigger: 'blur' }],
age: [
{ required: true, message: '年龄必填！', trigger: 'blur' },
// 指定正则，此处是数字正则
{ pattern: /^[1-9][0-9]?$|^100$/, message: '年龄必须在1到100之间', trigger: 'blur' },
],
idCard: [
{ required: true, message: '身份证必填！', trigger: 'blur' },
// 指定正则，此处是身份证正则
{ pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' },
],
email: [
{ required: true, message: '邮箱必填！', trigger: 'blur' },
// 指定校验类型
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
],
})
/**
* 重置表单
*/
const resetForm = () => {
form.value = {
username: '',
gender: 0,
age: 1,
idCard: '',
email: '',
address: '',
}
}
const dialogVisible = ref(false)
const title = ref('单列弹出框')
const open = (textTitle: string) => {
dialogVisible.value = true
title.value = textTitle
}
// 关闭弹出框
const close = () => {
//重置表单内容
//取消表单校验状态
formRuleRef.value && formRuleRef.value.resetFields()
dialogVisible.value = false
resetForm()
}
/**
* 校验表单数据
* 数据没问题，提交数据，并根据业务情况请求新增接口还是修改接口
*/
const confirmForm = () => {
ElMessage.info('业务数据提交')
try {
formRuleRef.value?.validate((valid: boolean) => {
if (valid) {
// 将表单数据转为json,发送到后端
let confirmFormData = JSON.parse(JSON.stringify(form.value))
if ('是否新增') {
// 执行新增接口
} else {
// 执行修改接口
}
} else {
ElMessage.error('表单验证失败！')
}
})
} catch (error) {
console.error('验证过程中发生错误', error)
}
}
defineExpose({ open })
</script>
<style>
</style>

3
frontend/src/views/home/components/table.vue
View File

@@ -989,4 +989,7 @@ defineExpose({ changeActiveTabs });
} }
} }
} }
:deep(.card){
border: 0 !important;
}
</style> </style>

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

@@ -113,13 +113,10 @@ defineExpose({ getTreeData })
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.plan_tree { .plan_tree {
// width: 200px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 5px; background-color: #fff;
// height: calc(100% - 70px);
background-color: #ffffff;
.search_view { .search_view {
width: 100%; width: 100%;

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

@@ -1,61 +1,59 @@
<!-- 真正的首页 --> <!-- 真正的首页 -->
<template> <template>
<div class="static"> <div class='static'>
<div class="left_tree"> <el-row :gutter='10'>
<tree ref="treeRef" :updateSelectedTreeNode="getPieData || (() => {})"/> <el-col :lg='4' :xl='4' :md='4' :sm='4'>
<div class='left_tree'>
<tree ref='treeRef' :updateSelectedTreeNode='getPieData || (() => {})' />
</div> </div>
<!-- <span class="new_span">测试scss颜色</span> --> </el-col>
<div class="right_container"> <el-col :lg='20' :xl='20' :md='20' :sm='20'>
<div class='right_container'>
<!-- 功能选择 --> <!-- 功能选择 -->
<div class="container_function"> <div class='container_function'>
<div <div
class="function_item" class='function_item'
:class=" :class="item.checked ? 'function_item checked_function' : 'function_item'"
item.checked ? 'function_item checked_function' : 'function_item' v-for='(item, index) in tabsList'
" :key='index'
v-for="(item, index) in tabsList" @click='handleCheckFunction(item.value)'
:key="index"
@click="handleCheckFunction(item.value)"
> >
<div class="item_img"> <div class='item_img'>
<img :src="item.img" alt=""/> <img :src='item.img' />
</div> </div>
<div class="item_text"> <div class='item_text'>
<p>{{ item.label }}</p> <p>{{ item.label }}</p>
</div> </div>
</div> </div>
</div> </div>
<!--检测计划统计 饼图统计-->
<!-- <el-collapse v-model="activeNames" @change="handleChange"> <div class='container_pieShow'>
<el-collapse-item title="检测进度展示" name="1"> --> <el-collapse model-value='1' accordion @change='handleCollapseChange'>
<div class="container_pieShow"> <el-collapse-item name='1'>
<el-collapse model-value="1" accordion @change="handleCollapseChange">
<el-collapse-item name="1">
<template #title> <template #title>
<div style="display: flex; justify-content: space-between; width: 100%;"> <div class='container_pieShow_title'>
<span style="font-weight: bold;margin-left: 15px;">检测计划统计</span> <span>检测计划统计</span>
<span style="font-weight: bold;margin-right: 15px;">{{ planName }}</span> <span>{{ planName }}</span>
</div> </div>
</template> </template>
<!-- 饼图 --> <!-- 饼图 -->
<div class="container_charts"> <div class='container_charts'>
<div class="charts_info" ref="chartsInfoRef"> <div class='charts_info' ref='chartsInfoRef'>
<pie <pie
:customData="{ :customData="{
title: '设备检测状态', title: '设备检测状态',
textAlign: 'left', textAlign: 'left',
}" }"
:legendData="{ :legendData="{
icon: 'circle', icon: 'circle',
left: 'left', left: 'left',
top: 'bottom', top: 'bottom',
}" }"
:chartsData="chartsData1" :chartsData='chartsData1'
ref="pieRef1" ref='pieRef1'
></pie> ></pie>
</div> </div>
<div class="charts_info"> <div class='charts_info'>
<pie <pie
:customData="{ :customData="{
title: '设备检测结果', title: '设备检测结果',
@@ -66,28 +64,23 @@
left: 'left', left: 'left',
top: 'bottom', top: 'bottom',
}" }"
:chartsData="chartsData2" :chartsData='chartsData2'
ref="pieRef2" ref='pieRef2'
></pie> ></pie>
</div> </div>
<div class="charts_info"> <div class='charts_info'>
<pie <pie
:customData="{ :customData="{
title: '设备报告状态', title: '设备报告状态',
textAlign: 'left', textAlign: 'left',
label: {
normal: {
position: 'inner',
},
},
}" }"
:legendData="{ :legendData="{
icon: 'circle', icon: 'circle',
left: 'left', left: 'left',
top: 'bottom', top: 'bottom',
}" }"
:chartsData="chartsData3" :chartsData='chartsData3'
ref="pieRef3" ref='pieRef3'
></pie> ></pie>
</div> </div>
</div> </div>
@@ -95,46 +88,43 @@
</el-collapse> </el-collapse>
</div> </div>
<el-tabs class="tabs-menu" type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue" :style="{ height: tabsHeight }"> <!--下方表格数据-->
<el-tab-pane :label="tabLabel1" :style="{ height: tabPaneHeight }"> <el-tabs class='tabs-menu' type='border-card' @tab-change='handleTabsChange' v-model='editableTabsValue'
:style='{ height: tabsHeight }'>
<el-tab-pane :label='tabLabel1' :style='{ height: tabPaneHeight }'>
<!-- 列表数据 --> <!-- 列表数据 -->
<div class="container_table" :style="{ height: tableHeight }"> <div class='container_table' :style='{ height: tableHeight }'>
<Table ref="tableRef1" :id='currentId' :isTimeCheck='isTimeCheck'></Table> <Table ref='tableRef1' :id='currentId' :isTimeCheck='isTimeCheck'></Table>
</div> </div>
</el-tab-pane> </el-tab-pane>
<!-- <el-tab-pane label="已检设备" v-if="tabShow" :style="{ height: tabPaneHeight }">-->
<!-- &lt;!&ndash; 列表数据 &ndash;&gt;-->
<!-- <div class="container_table" :style="{ height: tableHeight }">-->
<!-- <Table ref="tableRef2" :id='currentId'></Table>-->
<!-- </div>-->
<!-- </el-tab-pane>-->
</el-tabs> </el-tabs>
</div> </div>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang='ts' setup>
import pie from "@/components/echarts/pie/default.vue"; 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 tree from '../components/tree.vue'
import Table from "../components/table.vue"; import Table from '../components/table.vue'
//import { data } from "@/api/plan/static.json";
import deviceDataList from '@/api/device/device/deviceData' import deviceDataList from '@/api/device/device/deviceData'
import { getBoundPqDevList, getPlanListByPattern } from '@/api/plan/plan.ts' import { getBoundPqDevList, getPlanListByPattern } from '@/api/plan/plan.ts'
import {onBeforeMount, onUnmounted, ref, watch} from "vue"; import { onBeforeMount, onUnmounted, ref, watch } from 'vue'
import {useModeStore} from '@/stores/modules/mode'; // 引入模式 store import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
import { useDictStore } from '@/stores/modules/dict' import { useDictStore } from '@/stores/modules/dict'
import {type Plan} from "@/api/plan/interface"; import { type Plan } from '@/api/plan/interface'
import type {CollapseModelValue} from "element-plus/es/components/collapse/src/collapse.mjs"; import type { CollapseModelValue } from 'element-plus/es/components/collapse/src/collapse.mjs'
import {type Device} from "@/api/device/interface/device"; import { type Device } from '@/api/device/interface/device'
import {ResultData} from "@/api/interface"; import { ResultData } from '@/api/interface'
const planName = ref('') const planName = ref('')
const dictStore = useDictStore() const dictStore = useDictStore()
const modeStore = useModeStore(); const modeStore = useModeStore()
const chartsInfoRef = ref<HTMLElement | null>(null); const chartsInfoRef = ref<HTMLElement | null>(null)
const chartsWidth = ref<number>(0); const chartsWidth = ref<number>(0)
const deviceData = deviceDataList.plan_devicedata const deviceData = deviceDataList.plan_devicedata
const treeRef = ref(); const treeRef = ref()
const form: any = ref({ const form: any = ref({
activeTabs: 0, //功能选择,例如报告生成 activeTabs: 0, //功能选择,例如报告生成
activeChildTabs: 0,//子功能选择,例如未检设备报告生成，或已检设备更换误差体系生成 activeChildTabs: 0,//子功能选择,例如未检设备报告生成，或已检设备更换误差体系生成
@@ -144,84 +134,71 @@ const form: any = ref({
deviceBindStatus: 0, //绑定状态 deviceBindStatus: 0, //绑定状态
deviceType: 0, //设备类型 deviceType: 0, //设备类型
manufacturer: 0, //制造厂商 manufacturer: 0, //制造厂商
}); })
const router = useRouter(); const router = useRouter()
const activeNames = ref(['2']) const tabShow = ref(false)
const tabShow = ref(false);
const tabLabel1 = ref('设备检测') const tabLabel1 = ref('设备检测')
const editableTabsValue = ref('0') const editableTabsValue = ref('0')
const checkStateTable = ref<number[]>([0, 1, 2]) const checkStateTable = ref<number[]>([0, 1, 2])
const tabsHeight = ref('calc(100vh - 538px)'); // 初始高度 const tabsHeight = ref('calc(100vh - 522px)') // 初始高度
const tabPaneHeight = ref('calc(100% - 5px)') // 初始高度
const tableHeight = ref('calc(100% - 50px)') // 初始高度
const tabPaneHeight = ref('calc(100% - 5px)'); // 初始高度 const isTimeCheck = ref<boolean>(false)
const tableHeight = ref('calc(100% - 5px)'); // 初始高度 const planList = ref<ResultData<Plan.ReqPlan[]>>()
const handleChange = (val: string[]) => {
}
const isTimeCheck = ref<boolean>(false);
const planList = ref<ResultData<Plan.ReqPlan[]>>();
const handleCollapseChange = (val: CollapseModelValue) => { const handleCollapseChange = (val: CollapseModelValue) => {
// 计算新的高度 // 计算新的高度
let newHeight; let newHeight
if (Array.isArray(val)) { if (Array.isArray(val)) {
newHeight = val.length > 0 ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'; newHeight = val.length > 0 ? 'calc(100vh - 522px)' : 'calc(100vh - 333px)'
} else { } else {
newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'; newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'
}
tabsHeight.value = newHeight
tabPaneHeight.value = `calc(100% - 5px)`
tableHeight.value = `calc(100% - 5px)`
} }
//const newtableHeight= val.length > 0 ? 'calc(100vh - 638px)' : 'calc(100vh - 433px)';
tabsHeight.value = newHeight;
tabPaneHeight.value = `calc(100% - 5px)`;
tableHeight.value = `calc(100% - 5px)`;
// tableRef1.value.resize();
// tableRef2.value.resize();
};
const handleTabsChange = (val: any) => { const handleTabsChange = (val: any) => {
form.value.activeTabs = 0; form.value.activeTabs = 0
form.value.activeTabs = 3; form.value.activeTabs = 3
form.value.activeChildTabs = Number(val); form.value.activeChildTabs = Number(val)
} }
localStorage.setItem("color", "red"); localStorage.setItem('color', 'red')
//功能选择数据 //功能选择数据
const tabsList = ref([ const tabsList = ref([
{ {
label: "设备检测", label: '设备检测',
value: 0, value: 0,
img: "/src/assets/images/plan/static/1.svg", img: '/src/assets/images/plan/static/1.svg',
checked: true, checked: true,
}, },
// {
// label: "设备复检",
// value: 2,
// img: "/src/assets/images/plan/static/2.svg",
// checked: false,
// },
{ {
label: "报告生成", label: '报告生成',
value: 3, value: 3,
img: "/src/assets/images/plan/static/3.svg", img: '/src/assets/images/plan/static/3.svg',
checked: false, checked: false,
}, },
{ {
label: "设备归档", label: '设备归档',
value: 4, value: 4,
img: "/src/assets/images/plan/static/4.svg", img: '/src/assets/images/plan/static/4.svg',
checked: false, checked: false,
}, },
{ {
label: "数据操作", label: '数据操作',
value: 5, value: 5,
img: "/src/assets/images/plan/static/5.svg", img: '/src/assets/images/plan/static/5.svg',
checked: false, checked: false,
}, },
]); ])
form.value.activeTabs = tabsList.value[0].value; form.value.activeTabs = tabsList.value[0].value
const tableRef1 = ref(); const tableRef1 = ref()
const tableRef2 = ref(); const tableRef2 = ref()
const currentId = ref(''); const currentId = ref('')
watch( watch(
() => form.value, () => form.value,
@@ -230,261 +207,244 @@ watch(
if (form.value.activeTabs === 0)//设备检测 if (form.value.activeTabs === 0)//设备检测
{ {
const tabledata = deviceData.filter((item) => item.document_State === "未归档") const tabledata = deviceData.filter((item) => item.document_State === '未归档')
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata); tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
} else if (form.value.activeTabs === 4)//设备归档 } else if (form.value.activeTabs === 4)//设备归档
{ {
const tabledata = deviceData.filter((item) => item.check_State === "检测完成" && item.document_State === "未归档") const tabledata = deviceData.filter((item) => item.check_State === '检测完成' && item.document_State === '未归档')
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata); tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
} else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询 } else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
{ {
const tabledata = deviceData.filter((item) => item.check_State === "检测完成"); const tabledata = deviceData.filter((item) => item.check_State === '检测完成')
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata); tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
} }
} }
}, },
{ {
immediate: true, immediate: true,
deep: true, deep: true,
} },
); )
watch( watch(
() => form.value, () => form.value,
(val, oldVal) => { (val, oldVal) => {
if (val) { if (val) {
tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs); tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs)
} }
}, },
{ {
immediate: true, immediate: true,
deep: true, deep: true,
} },
); )
const pieRef1 = ref(), const pieRef1 = ref(),
pieRef2 = ref(), pieRef2 = ref(),
pieRef3 = ref(); pieRef3 = ref()
const chartsData1: any = ref([]), const chartsData1: any = ref([]),
chartsData2: any = ref([]), chartsData2: any = ref([]),
chartsData3: any = ref([]); chartsData3: any = ref([])
const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => { const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => {
for (const plan of plans) { for (const plan of plans) {
if (plan.id === id) { if (plan.id === id) {
return plan; return plan
} }
if (plan.children) { if (plan.children) {
const foundPlan = findPlanById(plan.children, id); const foundPlan = findPlanById(plan.children, id)
if (foundPlan) { if (foundPlan) {
return foundPlan; return foundPlan
} }
} }
} }
return undefined; return undefined
}; }
const getPieData = async (id: string) => { const getPieData = async (id: string) => {
currentId.value = id; // 设置当前ID currentId.value = id // 设置当前ID
//handleCheckFunction(0)//切换左侧树，默认css功能是设备检测
// 初始化计数对象 // 初始化计数对象
const checkStateCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0, 3: 0}; const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 }
const checkResultCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0}; const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
const reportStateCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0}; const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
if (id) { if (id) {
const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备 const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
const plan = findPlanById(planList.value?.data || [], id); const plan = findPlanById(planList.value?.data || [], id)
planName.value = '所选计划:' + plan.name planName.value = '所选计划:' + plan.name
if (plan) { if (plan) {
//isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true，0 转换为 false //isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true，0 转换为 false
isTimeCheck.value = false; // 将 1 转换为 true，0 转换为 false ----目前不用守时检测，先去除 isTimeCheck.value = false // 将 1 转换为 true，0 转换为 false ----目前不用守时检测，先去除
} else { } else {
// 处理未找到计划的情况 // 处理未找到计划的情况
isTimeCheck.value = false; // 或者其他默认值 isTimeCheck.value = false // 或者其他默认值
} }
const pqDevList_Result2 = await getBoundPqDevList({'planId': id, 'checkStateList': [0, 1, 2, 3]}); const pqDevList_Result2 = await getBoundPqDevList({ 'planId': id, 'checkStateList': [0, 1, 2, 3] })
boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]; boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]
// 遍历 boundPqDevList 并更新计数对象 // 遍历 boundPqDevList 并更新计数对象
boundPqDevList.value.forEach(t => { boundPqDevList.value.forEach(t => {
if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) { if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) {
checkStateCount[t.checkState]++; checkStateCount[t.checkState]++
} }
}); })
boundPqDevList.value.forEach(t => { boundPqDevList.value.forEach(t => {
if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) { if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) {
checkResultCount[t.checkResult]++; checkResultCount[t.checkResult]++
} }
}); })
boundPqDevList.value.forEach(t => { boundPqDevList.value.forEach(t => {
if (t.reportState !== undefined && t.reportState !== null && reportStateCount[t.reportState] !== undefined) { if (t.reportState !== undefined && t.reportState !== null && reportStateCount[t.reportState] !== undefined) {
reportStateCount[t.reportState]++; reportStateCount[t.reportState]++
} }
}); })
} }
chartsData1.value = [ chartsData1.value = [
{value: checkStateCount[0], name: "未检", itemStyle: {color: '#fac858'}}, { value: checkStateCount[0], name: '未检', itemStyle: { color: '#fac858' } },
{value: checkStateCount[1], name: "检测中", itemStyle: {color: '#ee6666'}}, { value: checkStateCount[1], name: '检测中', itemStyle: { color: '#ee6666' } },
{value: checkStateCount[2], name: "检测完成", itemStyle: {color: '#91cc75'}}, { value: checkStateCount[2], name: '检测完成', itemStyle: { color: '#91cc75' } },
{value: checkStateCount[3], name: "归档", itemStyle: {color: '#5470c6'}}, { value: checkStateCount[3], name: '归档', itemStyle: { color: '#5470c6' } },
]; ]
chartsData2.value = [ chartsData2.value = [
{value: checkResultCount[2], name: "未检", itemStyle: {color: '#fac858'}}, { value: checkResultCount[2], name: '未检', itemStyle: { color: '#fac858' } },
{value: checkResultCount[0], name: "不符合", itemStyle: {color: '#ee6666'}}, { value: checkResultCount[0], name: '不符合', itemStyle: { color: '#ee6666' } },
{value: checkResultCount[1], name: "符合", itemStyle: {color: '#91cc75'}}, { value: checkResultCount[1], name: '符合', itemStyle: { color: '#91cc75' } },
]; ]
chartsData3.value = [ chartsData3.value = [
{value: reportStateCount[2], name: "未检", itemStyle: {color: '#fac858'}}, { value: reportStateCount[2], name: '未检', itemStyle: { color: '#fac858' } },
{value: reportStateCount[0], name: "未生成", itemStyle: {color: '#ee6666'}}, { value: reportStateCount[0], name: '未生成', itemStyle: { color: '#ee6666' } },
{value: reportStateCount[1], name: "已生成", itemStyle: {color: '#91cc75'}}, { value: reportStateCount[1], name: '已生成', itemStyle: { color: '#91cc75' } },
]; ]
pieRef1.value.init(); pieRef1.value.init()
pieRef2.value.init(); pieRef2.value.init()
pieRef3.value.init(); pieRef3.value.init()
// pieRef1.value.reSize(470,145,true); }
// pieRef2.value.reSize(470,145,true);
// pieRef3.value.reSize(470,145,true);
};
const getTree = (data?: any) => { const getTree = (data?: any) => {
treeRef.value.getTreeData(data); treeRef.value.getTreeData(data)
}; }
//前往检测 //前往检测
const handleDetection = () => { const handleDetection = () => {
router.push({ router.push({
path: "/detection", path: '/detection',
}); })
}; }
//前往计划详情 //前往计划详情
const planDetail = () => { const planDetail = () => {
router.push({ router.push({
path: "/plan/planList", path: '/plan/planList',
}); })
}; }
//功能选择css切换 //功能选择css切换
const handleCheckFunction = (val: any) => { const handleCheckFunction = (val: any) => {
editableTabsValue.value = '0'; editableTabsValue.value = '0'
form.value.activeChildTabs = 0; form.value.activeChildTabs = 0
tabsList.value.map((item: any, index: any) => { tabsList.value.map((item: any, index: any) => {
if (val == item.value) { if (val == item.value) {
item.checked = true; item.checked = true
} else { } else {
item.checked = false; item.checked = false
} }
}); })
tabShow.value = false; tabShow.value = false
switch (val) { switch (val) {
case 0://自动检测 case 0://自动检测
checkStateTable.value = [0, 1, 2] checkStateTable.value = [0, 1, 2]
tabLabel1.value = "设备检测"; tabLabel1.value = '设备检测'
break; break
case 1://手动检测 case 1://手动检测
tabLabel1.value = "手动检测"; tabLabel1.value = '手动检测'
break; break
case 2://设备复检 case 2://设备复检
tabLabel1.value = "设备复检"; tabLabel1.value = '设备复检'
break; break
case 3://报告生成 case 3://报告生成
checkStateTable.value = [2, 3] checkStateTable.value = [2, 3]
tabLabel1.value = "报告生成"; tabLabel1.value = '报告生成'
//tabShow.value = true; //tabShow.value = true;
break; break
case 4://设备归档 case 4://设备归档
checkStateTable.value = [2] checkStateTable.value = [2]
tabLabel1.value = "设备归档"; tabLabel1.value = '设备归档'
break; break
case 5://数据查询 case 5://数据查询
checkStateTable.value = [2, 3] checkStateTable.value = [2, 3]
tabLabel1.value = "数据查询"; tabLabel1.value = '数据查询'
break; break
}
form.value.activeTabs = val
} }
form.value.activeTabs = val;
};
const resizeObserver = new ResizeObserver(entries => { const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) { for (let entry of entries) {
chartsWidth.value = entry.contentRect.width; chartsWidth.value = entry.contentRect.width
//console.log('Charts Info Width:', chartsWidth.value); //console.log('Charts Info Width:', chartsWidth.value);
pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true); pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true)
pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true); pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true)
pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true); pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true)
} }
}); })
onBeforeMount(async () => { onBeforeMount(async () => {
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
const reqPlan: Plan.ReqPlan = { const reqPlan: Plan.ReqPlan = {
pattern: patternId, pattern: patternId,
datasourceIds: "", datasourceIds: '',
sourceIds: "", sourceIds: '',
planId: "", planId: '',
scriptName: "", scriptName: '',
errorSysName: "", errorSysName: '',
sourceName: "", sourceName: '',
devIds: [], devIds: [],
id: "", id: '',
name: "", name: '',
dataSourceId: "", dataSourceId: '',
scriptId: "", scriptId: '',
errorSysId: "", errorSysId: '',
timeCheck: 0, timeCheck: 0,
testState: 0, testState: 0,
reportState: 0, reportState: 0,
result: 0, result: 0,
code: 0, code: 0,
state: 0 state: 0,
}; }
planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>; planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>
if (planList.value.data[0].children[0]) { if (planList.value.data[0].children[0]) {
currentId.value = planList.value.data[0].children[0].id; currentId.value = planList.value.data[0].children[0].id
} }
if (chartsInfoRef.value) { if (chartsInfoRef.value) {
resizeObserver.observe(chartsInfoRef.value); resizeObserver.observe(chartsInfoRef.value)
} }
getTree(planList.value.data); getTree(planList.value.data)
getPieData(currentId.value); getPieData(currentId.value)
}); })
onUnmounted(() => { onUnmounted(() => {
if (chartsInfoRef.value) { if (chartsInfoRef.value) {
resizeObserver.unobserve(chartsInfoRef.value); resizeObserver.unobserve(chartsInfoRef.value)
} }
}); })
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.static { .static {
width: 100%;
// height: calc(100vh - 165px);
height: 100%;
display: flex;
justify-content: space-between;
//background-color: #eee;
.left_tree { .left_tree {
width: 14% !important;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
} }
.right_container { .right_container {
flex: none; flex: none;
width: 85.8%;
// padding: 0 10px 0 10px;
margin-left: 10px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
//justify-content: space-between;
//align-items: center;
//box-sizing: border-box;
.container_function { .container_function {
@@ -566,134 +526,47 @@ onUnmounted(() => {
} }
} }
// .container_function {
// width: 100%;
// height: auto;
// background: #fff;
// border-radius: 4px;
// display: flex;
// // justify-content: space-around;
// // justify-content: space-evenly;
// justify-content: space-between;
// align-items: center;
// margin-bottom: 10px;
// padding: 10px 20px 10px 20px;
// box-sizing: border-box;
// .function_item {
// flex: none;
// width: 6%;
// height: 40px;
// display: flex;
// justify-content: space-between;
// align-items: center;
// flex-direction: row;
// cursor: pointer;
// background-color: #607eab;
// border-radius: 8px;
// padding: 0px 30px;
// .item_img {
// width: 30px;
// height: 30px;
// border-radius: 50%;
// // background-color: #607eab;
// display: flex;
// align-items: center;
// justify-content: center;
// margin-right: 5px;
// img {
// width: 20px;
// height: auto;
// }
// }
// .item_img:nth-child(3),
// .item_img:nth-child(6) {
// padding: 10px !important;
// img {
// width: 20px !important;
// height: auto;
// }
// }
// .item_text {
// p {
// width: 80px;
// margin: 0;
// font-weight: 800;
// color: var(--el-color-primary);
// font-size: 14px;
// font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
// }
// }
// }
// .function_item:hover,
// .checked_function {
// background-color: var(--el-color-primary);
// .item_img {
// // background-color: var(--el-color-primary);
// }
// .item_text {
// p {
// // color: var(--el-color-primary);
// color: #fff;
// }
// }
// }
// }
.container_pieShow { .container_pieShow {
width: 100% !important; width: 100% !important;
//min-height: 200px !important;
height: auto; height: auto;
background-color: #eee; background-color: #eee;
// display: flex;
// justify-content: space-between;
// padding-left: 2ch;
margin-bottom: 10px; margin-bottom: 10px;
.container_pieShow_title {
display: flex;
justify-content: space-between;
padding: 0 15px;
font-weight: bold;
width: 100%;
}
} }
.el-collapse { .el-collapse {
width: 100% !important; width: 100% !important;
// min-height: 200px !important;
height: 100% !important; height: 100% !important;
background-color: #eee; background-color: #eee;
// display: flex;
// justify-content: space-between;
// padding-left: 2ch;
// margin-bottom: 10px;
} }
.el-collapse-item { .el-collapse-item {
width: 100% !important; width: 100% !important;
// min-height: 200px !important;
height: 100% !important; height: 100% !important;
background-color: #eee; background-color: #eee;
// display: flex !important;
} }
.container_charts { .container_charts {
width: 100%; width: 100%;
//min-height: 180px !important;
height: 100%; height: 100%;
background-color: #eee; background-color: #eee;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px;
.charts_info { .charts_info {
margin-top: 5px; margin-top: 1px;
border-radius: 4px;
flex: none; flex: none;
width: 33.1%; width: 33.1%;
height: 100% !important; height: 100% !important;
background-color: #fff; background-color: #fff;
// border-radius: 4px;
} }
} }
@@ -702,8 +575,11 @@ onUnmounted(() => {
border-radius: 4px; border-radius: 4px;
} }
.tabs-menu { .tabs-menu {
height: 100%; height: 100%;
border: 0;
} }
.container_table { .container_table {
@@ -724,17 +600,20 @@ onUnmounted(() => {
:deep(.el-collapse-item__header) { :deep(.el-collapse-item__header) {
color: var(--el-color-primary); color: var(--el-color-primary);
font-size: 18px; font-size: 14px;
font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif; font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
} }
:deep(.el-collapse-item__conten) { :deep(.el-collapse-item__conten) {
// background-color:#f6f6f6;
padding-bottom: 0px !important; padding-bottom: 0px !important;
} }
:deep(.el-collapse-item__content ) { :deep(.el-collapse-item__content ) {
// background-color:#f6f6f6;
padding-bottom: 0px !important; padding-bottom: 0px !important;
} }
:deep(.el-tabs--border-card > .el-tabs__content) {
padding: 0 !important;
}
</style> </style>