733 lines
22 KiB
Vue
733 lines
22 KiB
Vue
<!-- 真正的首页 -->
|
|
<template>
|
|
<div class='static'>
|
|
<el-row :gutter='10'>
|
|
<el-col :lg='4' :xl='4' :md='4' :sm='4'>
|
|
<div class='left_tree'>
|
|
<!-- <tree ref='treeRef' :updateSelectedTreeNode='getPieData || (() => {})' /> -->
|
|
<tree ref='treeRef' :updateSelectedTreeNode='updateData|| (() => {})' />
|
|
</div>
|
|
</el-col>
|
|
<el-col :lg='20' :xl='20' :md='20' :sm='20'>
|
|
<div class='right_container'>
|
|
<!-- 功能选择 -->
|
|
<div class='container_function'>
|
|
<div
|
|
class='function_item'
|
|
:class="item.checked ? 'function_item checked_function' : 'function_item'"
|
|
v-for='(item, index) in tabsList'
|
|
:key='index'
|
|
@click='handleCheckFunction(item.value)'
|
|
>
|
|
<div class='item_img'>
|
|
<img :src='item.img' />
|
|
</div>
|
|
<div class='item_text'>
|
|
<p>{{ item.label }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--检测计划统计 饼图统计-->
|
|
<div class='container_pieShow'>
|
|
<el-collapse model-value='1' accordion @change='handleCollapseChange'>
|
|
<el-collapse-item name='1'>
|
|
<template #title>
|
|
<div class='container_pieShow_title'>
|
|
<span>检测计划统计</span>
|
|
<span>{{ planName }}</span>
|
|
</div>
|
|
</template>
|
|
<!-- 饼图 -->
|
|
<div class='container_charts'>
|
|
<div class='charts_info' ref='chartsInfoRef'>
|
|
<pie
|
|
:customData="{
|
|
title: '设备检测状态',
|
|
textAlign: 'left',
|
|
}"
|
|
:legendData="{
|
|
icon: 'circle',
|
|
left: 'left',
|
|
top: 'bottom',
|
|
}"
|
|
:chartsData='chartsData1'
|
|
ref='pieRef1'
|
|
></pie>
|
|
</div>
|
|
<div class='charts_info'>
|
|
<pie
|
|
:customData="{
|
|
title: '设备检测结果',
|
|
textAlign: 'left',
|
|
}"
|
|
:legendData="{
|
|
icon: 'circle',
|
|
left: 'left',
|
|
top: 'bottom',
|
|
}"
|
|
:chartsData='chartsData2'
|
|
ref='pieRef2'
|
|
></pie>
|
|
</div>
|
|
<div class='charts_info'>
|
|
<pie
|
|
:customData="{
|
|
title: '设备报告状态',
|
|
textAlign: 'left',
|
|
}"
|
|
:legendData="{
|
|
icon: 'circle',
|
|
left: 'left',
|
|
top: 'bottom',
|
|
}"
|
|
:chartsData='chartsData3'
|
|
ref='pieRef3'
|
|
></pie>
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</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}'>
|
|
<!-- 列表数据 -->
|
|
<div class='container_table' :style='{ height: tableHeight }'>
|
|
<Table ref='tableRef1' :id='currentId' :plan = 'select_Plan' @batchGenerateClicked="handleBatchGenerate"></Table>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script lang='ts' setup>
|
|
import pie from '@/components/echarts/pie/default.vue'
|
|
import { useRouter } from 'vue-router'
|
|
import tree from '../components/tree.vue'
|
|
import Table from '../components/table.vue'
|
|
import deviceDataList from '@/api/device/device/deviceData'
|
|
import { getBoundPqDevList, getPlanListByPattern } from '@/api/plan/plan.ts'
|
|
import { onBeforeMount, onUnmounted, ref, watch } from 'vue'
|
|
import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
|
|
import { useDictStore } from '@/stores/modules/dict'
|
|
import { type Plan } from '@/api/plan/interface'
|
|
import type { CollapseModelValue } from 'element-plus/es/components/collapse/src/collapse.mjs'
|
|
import { type Device } from '@/api/device/interface/device'
|
|
import { ResultData } from '@/api/interface'
|
|
|
|
const planName = ref('')
|
|
const dictStore = useDictStore()
|
|
const modeStore = useModeStore()
|
|
const chartsInfoRef = ref<HTMLElement | null>(null)
|
|
const chartsWidth = ref<number>(0)
|
|
const deviceData = deviceDataList.plan_devicedata
|
|
const treeRef = ref()
|
|
const form: any = ref({
|
|
activeTabs: 0, //功能选择,例如报告生成
|
|
activeChildTabs: 0,//子功能选择,例如未检设备报告生成，或已检设备更换误差体系生成
|
|
checkStatus: 0, //检测状态
|
|
checkReportStatus: 0, //检测报告状态
|
|
checkResult: 0, //检测结果
|
|
deviceBindStatus: 0, //绑定状态
|
|
deviceType: 0, //设备类型
|
|
manufacturer: 0, //制造厂商
|
|
})
|
|
const router = useRouter()
|
|
const tabShow = ref(false)
|
|
const tabLabel1 = ref('设备检测')
|
|
const editableTabsValue = ref('0')
|
|
const checkStateTable = ref<number[]>([0, 1, 2])
|
|
const tabsHeight = ref('calc(100vh - 522px)') // 初始高度
|
|
const tabPaneHeight = ref('calc(100% - 5px)') // 初始高度
|
|
const tableHeight = ref('calc(100% - 50px)') // 初始高度
|
|
|
|
const planList = ref<ResultData<Plan.ReqPlan[]>>()
|
|
const select_Plan = ref<Plan.ReqPlan>()
|
|
const isLabelLineShow = ref(true)
|
|
const handleCollapseChange = (val: CollapseModelValue) => {
|
|
|
|
// 计算新的高度
|
|
let newHeight
|
|
if (Array.isArray(val)) {
|
|
newHeight = val.length > 0 ? 'calc(100vh - 522px)' : 'calc(100vh - 333px)'
|
|
} else {
|
|
newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'
|
|
}
|
|
tabsHeight.value = newHeight
|
|
tabPaneHeight.value = `calc(100% - 5px)`
|
|
tableHeight.value = `calc(100% - 5px)`
|
|
}
|
|
|
|
const handleTabsChange = (val: any) => {
|
|
form.value.activeTabs = 0
|
|
form.value.activeTabs = 3
|
|
form.value.activeChildTabs = Number(val)
|
|
|
|
}
|
|
localStorage.setItem('color', '#91cc75')
|
|
//功能选择数据
|
|
const tabsList = ref([
|
|
{
|
|
label: '设备检测',
|
|
value: 0,
|
|
img: new URL('/src/assets/images/plan/static/1.svg', import.meta.url).href,
|
|
checked: true,
|
|
},
|
|
{
|
|
label: '报告生成',
|
|
value: 3,
|
|
img: new URL('/src/assets/images/plan/static/3.svg', import.meta.url).href,
|
|
checked: false,
|
|
},
|
|
{
|
|
label: '设备归档',
|
|
value: 4,
|
|
img: new URL('/src/assets/images/plan/static/4.svg', import.meta.url).href,
|
|
checked: false,
|
|
},
|
|
{
|
|
label: '数据操作',
|
|
value: 5,
|
|
img: new URL('/src/assets/images/plan/static/5.svg', import.meta.url).href,
|
|
checked: false,
|
|
},
|
|
])
|
|
|
|
form.value.activeTabs = tabsList.value[0].value
|
|
const tableRef1 = ref()
|
|
const tableRef2 = ref()
|
|
const currentId = ref('')
|
|
|
|
|
|
watch(
|
|
() => form.value,
|
|
(val, oldVal) => {
|
|
if (val) {
|
|
|
|
if (form.value.activeTabs === 0)//设备检测
|
|
{
|
|
const tabledata = deviceData.filter((item) => item.document_State === '未归档')
|
|
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
|
|
} else if (form.value.activeTabs === 4)//设备归档
|
|
{
|
|
const tabledata = deviceData.filter((item) => item.check_State === '检测完成' && item.document_State === '未归档')
|
|
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
|
|
} else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
|
|
{
|
|
const tabledata = deviceData.filter((item) => item.check_State === '检测完成')
|
|
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
|
|
}
|
|
}
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true,
|
|
},
|
|
)
|
|
watch(
|
|
() => form.value,
|
|
(val, oldVal) => {
|
|
if (val) {
|
|
tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs)
|
|
}
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true,
|
|
},
|
|
)
|
|
|
|
|
|
|
|
const pieRef1 = ref(),
|
|
pieRef2 = ref(),
|
|
pieRef3 = ref()
|
|
|
|
const chartsData1: any = ref([]),
|
|
chartsData2: any = ref([]),
|
|
chartsData3: any = ref([])
|
|
|
|
const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => {
|
|
for (const plan of plans) {
|
|
if (plan.id === id) {
|
|
return plan
|
|
}
|
|
if (plan.children) {
|
|
const foundPlan = findPlanById(plan.children, id)
|
|
if (foundPlan) {
|
|
return foundPlan
|
|
}
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
|
|
const updateData = (id: string) => {
|
|
getPieData(id);//刷新饼图
|
|
|
|
//获取点击树的父节点名字
|
|
const parentNodeName = ref('')
|
|
for (let i = 0; i < planList.value.data.length; i++) {
|
|
if (Array.isArray(planList.value.data[i].children) && planList.value.data[i].children.length > 0) {
|
|
for (let j = 0; j < planList.value.data[i].children.length; j++) {
|
|
if (planList.value.data[i].children[j].id === id) {
|
|
parentNodeName.value = planList.value.data[i].name
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if(parentNodeName.value === '检测完成'){
|
|
handleCheckFunction(5)
|
|
}else{
|
|
handleCheckFunction(0)
|
|
}
|
|
}
|
|
|
|
const getPieData = async (id: string) => {
|
|
currentId.value = id // 设置当前ID
|
|
// 初始化计数对象
|
|
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 reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
|
|
if (id) {
|
|
const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
|
|
const plan = findPlanById(planList.value?.data || [], id)
|
|
planName.value = '所选计划:' + plan.name
|
|
|
|
select_Plan.value = plan
|
|
|
|
const pqDevList_Result2 = await getBoundPqDevList({ 'planId': id, 'checkStateList': [0, 1, 2, 3] })
|
|
boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]
|
|
// 遍历 boundPqDevList 并更新计数对象
|
|
boundPqDevList.value.forEach(t => {
|
|
if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) {
|
|
checkStateCount[t.checkState]++
|
|
}
|
|
})
|
|
boundPqDevList.value.forEach(t => {
|
|
if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) {
|
|
checkResultCount[t.checkResult]++
|
|
}
|
|
})
|
|
boundPqDevList.value.forEach(t => {
|
|
if (t.reportState !== undefined && t.reportState !== null && reportStateCount[t.reportState] !== undefined) {
|
|
reportStateCount[t.reportState]++
|
|
}
|
|
})
|
|
|
|
|
|
// 检查 checkStateCount 是否全为 0
|
|
if(boundPqDevList.value.length != 0){
|
|
|
|
isLabelLineShow.value = true;
|
|
const allZero = Object.values(checkStateCount).every(count => count === 0);
|
|
chartsData1.value = [
|
|
{ value: allZero ? 0 : checkStateCount[0] === 0 ? null : checkStateCount[0], name: '未检', itemStyle: { color: '#fac858' } },
|
|
{ value: allZero ? 0 : checkStateCount[1] === 0 ? null : checkStateCount[1], name: '检测中', itemStyle: { color: '#ee6666' } },
|
|
{ value: allZero ? 0 : checkStateCount[2] === 0 ? null : checkStateCount[2], name: '检测完成', itemStyle: { color: '#91cc75' } },
|
|
{ value: allZero ? 0 : checkStateCount[3] === 0 ? null : checkStateCount[3], name: '归档', itemStyle: { color: '#5470c6' } },
|
|
];
|
|
// 同样处理 chartsData2 和 chartsData3
|
|
const allZeroResult = Object.values(checkResultCount).every(count => count === 0);
|
|
chartsData2.value = [
|
|
{ value: allZeroResult ? 0 : checkResultCount[2] === 0 ? null : checkResultCount[2], name: '未检', itemStyle: { color: '#fac858' } },
|
|
{ value: allZeroResult ? 0 : checkResultCount[0] === 0 ? null : checkResultCount[0], name: '不符合', itemStyle: { color: '#ee6666' } },
|
|
{ value: allZeroResult ? 0 : checkResultCount[1] === 0 ? null : checkResultCount[1], name: '符合', itemStyle: { color: '#91cc75' } },
|
|
];
|
|
|
|
|
|
// 检查 reportStateCount 是否全为 0
|
|
const allZeroReport = Object.values(reportStateCount).every(count => count === 0);
|
|
chartsData3.value = [
|
|
{ value: allZeroReport ? 0 : reportStateCount[2] === 0 ? null : reportStateCount[2], name: '未检', itemStyle: { color: '#fac858' } },
|
|
{ value: allZeroReport ? 0 : reportStateCount[0] === 0 ? null : reportStateCount[0], name: '未生成', itemStyle: { color: '#ee6666' } },
|
|
{ value: allZeroReport ? 0 : reportStateCount[1] === 0 ? null : reportStateCount[1], name: '已生成', itemStyle: { color: '#91cc75' } },
|
|
];
|
|
|
|
}else{
|
|
|
|
isLabelLineShow.value = false;//不展示引导线
|
|
chartsData1.value = [
|
|
{ value: null , name: '未检', itemStyle: { color: '#fac858' } },
|
|
{ value: null , name: '检测中', itemStyle: { color: '#ee6666' } },
|
|
{ value: null , name: '检测完成', itemStyle: { color: '#91cc75' } },
|
|
{ value: null , name: '归档', itemStyle: { color: '#5470c6' } },
|
|
{ value: 0 , itemStyle: { color: '#eeeeee' } },
|
|
];
|
|
|
|
chartsData2.value = [
|
|
{ value: null, name: '未检', itemStyle: { color: '#fac858' } },
|
|
{ value: null, name: '不符合', itemStyle: { color: '#ee6666' } },
|
|
{ value: null, name: '符合', itemStyle: { color: '#91cc75' } },
|
|
{ value: 0 , itemStyle: { color: '#eeeeee' } },
|
|
];
|
|
|
|
chartsData3.value = [
|
|
{ value: null, name: '未检', itemStyle: { color: '#fac858' } },
|
|
{ value: null, name: '未生成', itemStyle: { color: '#ee6666' } },
|
|
{ value: null, name: '已生成', itemStyle: { color: '#91cc75' } },
|
|
{ value: 0 , itemStyle: { color: '#eeeeee' } },
|
|
];
|
|
}
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
planName.value = '所选计划:'
|
|
}
|
|
|
|
|
|
|
|
pieRef1.value.init()
|
|
pieRef2.value.init()
|
|
pieRef3.value.init()
|
|
}
|
|
const getTree = (data?: any) => {
|
|
treeRef.value.getTreeData(data)
|
|
}
|
|
//前往检测
|
|
const handleDetection = () => {
|
|
router.push({
|
|
path: '/detection',
|
|
})
|
|
}
|
|
//前往计划详情
|
|
const planDetail = () => {
|
|
router.push({
|
|
path: '/plan/planList',
|
|
})
|
|
}
|
|
|
|
|
|
//功能选择css切换
|
|
const handleCheckFunction = (val: any) => {
|
|
|
|
editableTabsValue.value = '0'
|
|
form.value.activeChildTabs = 0
|
|
tabsList.value.map((item: any, index: any) => {
|
|
if (val == item.value) {
|
|
item.checked = true
|
|
} else {
|
|
item.checked = false
|
|
}
|
|
})
|
|
|
|
tabShow.value = false
|
|
|
|
switch (val) {
|
|
case 0://自动检测
|
|
checkStateTable.value = [0, 1, 2]
|
|
tabLabel1.value = '设备检测'
|
|
break
|
|
case 1://手动检测
|
|
tabLabel1.value = '手动检测'
|
|
break
|
|
case 2://设备复检
|
|
tabLabel1.value = '设备复检'
|
|
break
|
|
case 3://报告生成
|
|
checkStateTable.value = [2, 3]
|
|
tabLabel1.value = '报告生成'
|
|
//tabShow.value = true;
|
|
break
|
|
case 4://设备归档
|
|
checkStateTable.value = [2]
|
|
tabLabel1.value = '设备归档'
|
|
break
|
|
case 5://数据查询
|
|
checkStateTable.value = [2, 3]
|
|
tabLabel1.value = '数据查询'
|
|
break
|
|
}
|
|
form.value.activeTabs = val
|
|
}
|
|
|
|
|
|
const resizeObserver = new ResizeObserver(entries => {
|
|
for (let entry of entries) {
|
|
chartsWidth.value = entry.contentRect.width
|
|
//console.log('Charts Info Width:', chartsWidth.value);
|
|
|
|
pieRef1.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)
|
|
}
|
|
})
|
|
|
|
|
|
const initPlan = async () => {
|
|
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
|
|
const reqPlan: Plan.ReqPlan = {
|
|
pattern: patternId,
|
|
datasourceIds: '',
|
|
sourceIds: '',
|
|
planId: '',
|
|
scriptName: '',
|
|
errorSysName: '',
|
|
sourceName: '',
|
|
devIds: [],
|
|
id: '',
|
|
name: '',
|
|
dataSourceId: '',
|
|
scriptId: '',
|
|
errorSysId: '',
|
|
timeCheck: 0,
|
|
testState: 0,
|
|
reportState: 0,
|
|
result: 0,
|
|
code: 0,
|
|
state: 0,
|
|
}
|
|
planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>
|
|
}
|
|
|
|
onBeforeMount(async () => {
|
|
await initPlan()
|
|
for (let i = 0; i < planList.value.data.length; i++) {
|
|
if (Array.isArray(planList.value.data[i].children) && planList.value.data[i].children.length > 0) {
|
|
currentId.value = planList.value.data[i].children[0].id; // 直接赋值第一个 children 的 id
|
|
break; // 确保只执行一次
|
|
}
|
|
}
|
|
|
|
// if (planList.value.data[0].children[0]) {
|
|
// currentId.value = planList.value.data[0].children[0].id
|
|
// console.log('currentId.value',planList.value.data[0])
|
|
// }
|
|
|
|
if (chartsInfoRef.value) {
|
|
resizeObserver.observe(chartsInfoRef.value)
|
|
}
|
|
getTree(planList.value.data)
|
|
|
|
getPieData(currentId.value)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (chartsInfoRef.value) {
|
|
resizeObserver.unobserve(chartsInfoRef.value)
|
|
}
|
|
})
|
|
|
|
const handleBatchGenerate = async () => {
|
|
// console.log('批量生成按钮被点击了');
|
|
// 在这里添加其他逻辑，比如显示对话框、更新状态等
|
|
await initPlan()
|
|
treeRef.value.clickTableToTree(planList.value.data,currentId.value)
|
|
getPieData(currentId.value)
|
|
|
|
if (form.value.activeTabs === 0)//设备检测
|
|
{
|
|
const tabledata = deviceData.filter((item) => item.document_State === '未归档')
|
|
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
|
|
} else if (form.value.activeTabs === 4)//设备归档
|
|
{
|
|
const tabledata = deviceData.filter((item) => item.check_State === '检测完成' && item.document_State === '未归档')
|
|
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
|
|
} else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
|
|
{
|
|
const tabledata = deviceData.filter((item) => item.check_State === '检测完成')
|
|
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
|
|
}
|
|
|
|
};
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
|
|
.static {
|
|
|
|
.left_tree {
|
|
height: 100%;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.right_container {
|
|
flex: none;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
|
|
.container_function {
|
|
width: 100%;
|
|
height: auto;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
padding: 10px 20px 10px 20px;
|
|
box-sizing: border-box;
|
|
|
|
.function_item {
|
|
flex: none;
|
|
width: 6%;
|
|
height: 70px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
background-color: #607eab;
|
|
border-radius: 8px;
|
|
padding: 0px 30px;
|
|
margin-right: 50px;;
|
|
|
|
.item_img {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
// background-color: #607eab;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
img {
|
|
width: 40px;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.item_img:nth-child(3),
|
|
.item_img:nth-child(6) {
|
|
padding: 10px !important;
|
|
|
|
img {
|
|
width: 20px !important;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.item_text {
|
|
p {
|
|
margin: 0;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
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 {
|
|
width: 100% !important;
|
|
height: auto;
|
|
background-color: #eee;
|
|
margin-bottom: 10px;
|
|
|
|
.container_pieShow_title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 15px;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
}
|
|
|
|
}
|
|
|
|
.el-collapse {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
background-color: #eee;
|
|
}
|
|
|
|
.el-collapse-item {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
background-color: #eee;
|
|
}
|
|
|
|
.container_charts {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #eee;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.charts_info {
|
|
margin-top: 1px;
|
|
flex: none;
|
|
width: 33.1%;
|
|
height: 100% !important;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.el-tabs {
|
|
width: 100% !important;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
|
|
|
|
.tabs-menu {
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
.container_table {
|
|
// width: 100%;
|
|
flex: 1 !important;
|
|
//height: calc(100vh - 360px - 180px);
|
|
height: 100% !important;
|
|
border-radius: 4px;
|
|
width: 100% !important;
|
|
// display: none;
|
|
.table_info {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-collapse-item__header) {
|
|
color: var(--el-color-primary);
|
|
font-size: 14px;
|
|
font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
|
|
}
|
|
|
|
:deep(.el-collapse-item__conten) {
|
|
padding-bottom: 0px !important;
|
|
}
|
|
|
|
:deep(.el-collapse-item__content ) {
|
|
padding-bottom: 0px !important;
|
|
}
|
|
|
|
:deep(.el-tabs--border-card > .el-tabs__content) {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|