微调
This commit is contained in:
@@ -22,11 +22,16 @@ const props = defineProps({
|
|||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
|
|
||||||
});
|
});
|
||||||
const customData: any = ref({}),
|
const customData: any = ref({}),
|
||||||
legendData: any = ref({}),
|
legendData: any = ref({}),
|
||||||
chart: any = ref();
|
chart: any = ref();
|
||||||
|
|
||||||
|
const labelIsShow = ref(true)//引导线台数和鼠标点击饼图是否弹出提示显示
|
||||||
const init = () => {
|
const init = () => {
|
||||||
|
|
||||||
|
|
||||||
customData.value = {
|
customData.value = {
|
||||||
title: "", //标题
|
title: "", //标题
|
||||||
textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
|
textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
|
||||||
@@ -36,6 +41,7 @@ const init = () => {
|
|||||||
isSpace: false, //是否显示间隔
|
isSpace: false, //是否显示间隔
|
||||||
isLabelLine: true, //是否显示引导线
|
isLabelLine: true, //是否显示引导线
|
||||||
titleFontSize: '14px', //标题字体大小
|
titleFontSize: '14px', //标题字体大小
|
||||||
|
|
||||||
...props.customData,
|
...props.customData,
|
||||||
|
|
||||||
};
|
};
|
||||||
@@ -71,7 +77,7 @@ const init = () => {
|
|||||||
// },
|
// },
|
||||||
// },
|
// },
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show: true,
|
show: labelIsShow.value,
|
||||||
trigger: "item",
|
trigger: "item",
|
||||||
formatter: customData.value.ratio ? `{b} : {c} ({d}%)` : "{b} :{c} ",
|
formatter: customData.value.ratio ? `{b} : {c} ({d}%)` : "{b} :{c} ",
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
@@ -100,14 +106,14 @@ const init = () => {
|
|||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: labelIsShow.value,
|
||||||
position: "outside",
|
position: "outside",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
//color: "#fff",
|
//color: "#fff",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
},
|
},
|
||||||
formatter: function (data) {
|
formatter: function (data) {
|
||||||
return data.value +'台'
|
return labelIsShow.value ? data.value + '台' : '';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -122,6 +128,7 @@ const init = () => {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
option && chart.value && chart.value.setOption(option);
|
option && chart.value && chart.value.setOption(option);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
chart.value.resize();
|
chart.value.resize();
|
||||||
@@ -157,6 +164,12 @@ watch(
|
|||||||
() => props.chartsData,
|
() => props.chartsData,
|
||||||
(val, oldVal) => {
|
(val, oldVal) => {
|
||||||
if (val) {
|
if (val) {
|
||||||
|
const item = props.chartsData.find(item => item.value === 0);
|
||||||
|
if(item != undefined){
|
||||||
|
labelIsShow.value = false;
|
||||||
|
}else{
|
||||||
|
labelIsShow.value = true;
|
||||||
|
}
|
||||||
init();
|
init();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
<template #default='{ node, data }'>
|
<template #default='{ node, data }'>
|
||||||
<span class='custom-tree-node' style='display: flex;align-items: center;'>
|
<span class='custom-tree-node' style='display: flex;align-items: center;'>
|
||||||
<Platform v-if='!data.pid' style='width:18px;height: 18px;margin-right:8px;'
|
<Platform v-if='!data.pid' style='width:18px;height: 18px;margin-right:8px;'
|
||||||
:style="{color:node.label=='未检'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" />
|
:style="{color:node.label=='未检'?'#fac858':node.label=='检测中'?'#ee6666':'#91cc75'}" />
|
||||||
<span>{{ node.label }}</span>
|
<span>{{ node.label }}</span>
|
||||||
<!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
|
<!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -44,7 +44,6 @@
|
|||||||
:customData="{
|
:customData="{
|
||||||
title: '设备检测状态',
|
title: '设备检测状态',
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
|
|
||||||
}"
|
}"
|
||||||
:legendData="{
|
:legendData="{
|
||||||
icon: 'circle',
|
icon: 'circle',
|
||||||
@@ -149,6 +148,7 @@ const tableHeight = ref('calc(100% - 50px)') // 初始高度
|
|||||||
const isTimeCheck = ref<boolean>(false)
|
const isTimeCheck = ref<boolean>(false)
|
||||||
const planList = ref<ResultData<Plan.ReqPlan[]>>()
|
const planList = ref<ResultData<Plan.ReqPlan[]>>()
|
||||||
const select_Plan = ref<Plan.ReqPlan>()
|
const select_Plan = ref<Plan.ReqPlan>()
|
||||||
|
const isLabelLineShow = ref(true)
|
||||||
const handleCollapseChange = (val: CollapseModelValue) => {
|
const handleCollapseChange = (val: CollapseModelValue) => {
|
||||||
|
|
||||||
// 计算新的高度
|
// 计算新的高度
|
||||||
@@ -301,7 +301,6 @@ const getPieData = async (id: string) => {
|
|||||||
const plan = findPlanById(planList.value?.data || [], id)
|
const plan = findPlanById(planList.value?.data || [], id)
|
||||||
planName.value = '所选计划:' + plan.name
|
planName.value = '所选计划:' + plan.name
|
||||||
|
|
||||||
|
|
||||||
select_Plan.value = plan
|
select_Plan.value = plan
|
||||||
if (plan) {
|
if (plan) {
|
||||||
//isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true,0 转换为 false
|
//isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true,0 转换为 false
|
||||||
@@ -310,7 +309,7 @@ const getPieData = async (id: string) => {
|
|||||||
// 处理未找到计划的情况
|
// 处理未找到计划的情况
|
||||||
isTimeCheck.value = false // 或者其他默认值
|
isTimeCheck.value = false // 或者其他默认值
|
||||||
}
|
}
|
||||||
console.log('饼图getBoundPqDevList')
|
|
||||||
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 并更新计数对象
|
||||||
@@ -332,6 +331,9 @@ const getPieData = async (id: string) => {
|
|||||||
|
|
||||||
|
|
||||||
// 检查 checkStateCount 是否全为 0
|
// 检查 checkStateCount 是否全为 0
|
||||||
|
if(boundPqDevList.value.length != 0){
|
||||||
|
|
||||||
|
isLabelLineShow.value = true;
|
||||||
const allZero = Object.values(checkStateCount).every(count => count === 0);
|
const allZero = Object.values(checkStateCount).every(count => count === 0);
|
||||||
chartsData1.value = [
|
chartsData1.value = [
|
||||||
{ value: allZero ? 0 : checkStateCount[0] === 0 ? null : checkStateCount[0], name: '未检', itemStyle: { color: '#fac858' } },
|
{ value: allZero ? 0 : checkStateCount[0] === 0 ? null : checkStateCount[0], name: '未检', itemStyle: { color: '#fac858' } },
|
||||||
@@ -339,7 +341,6 @@ const getPieData = async (id: string) => {
|
|||||||
{ value: allZero ? 0 : checkStateCount[2] === 0 ? null : checkStateCount[2], name: '检测完成', itemStyle: { color: '#91cc75' } },
|
{ 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' } },
|
{ value: allZero ? 0 : checkStateCount[3] === 0 ? null : checkStateCount[3], name: '归档', itemStyle: { color: '#5470c6' } },
|
||||||
];
|
];
|
||||||
|
|
||||||
// 同样处理 chartsData2 和 chartsData3
|
// 同样处理 chartsData2 和 chartsData3
|
||||||
const allZeroResult = Object.values(checkResultCount).every(count => count === 0);
|
const allZeroResult = Object.values(checkResultCount).every(count => count === 0);
|
||||||
chartsData2.value = [
|
chartsData2.value = [
|
||||||
@@ -356,6 +357,36 @@ const getPieData = async (id: string) => {
|
|||||||
{ value: allZeroReport ? 0 : reportStateCount[0] === 0 ? null : reportStateCount[0], name: '未生成', itemStyle: { color: '#ee6666' } },
|
{ 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' } },
|
{ 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{
|
}else{
|
||||||
|
|
||||||
planName.value = '所选计划:'
|
planName.value = '所选计划:'
|
||||||
|
|||||||
Reference in New Issue
Block a user