zhouhaibin
9 months ago
9 changed files with 548 additions and 40 deletions
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<v-chart :option="option" theme="auto" :autoresize="true" style="width: 100%; height: 200px" /> |
|||
</template> |
|||
|
|||
<script lang="ts" name="DonutChart" setup> |
|||
import { ref, reactive } from 'vue' |
|||
let receivingParameter = defineProps(["fininshNum", "unfininshNum", "name"]) |
|||
let option = reactive({}) |
|||
option = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b}: {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
// data: [ |
|||
// '已完成', |
|||
// '未完成' |
|||
// ], |
|||
left: 'left', |
|||
// orient: 'vertical', |
|||
}, |
|||
series: [ |
|||
// { |
|||
// name: 'Access From', |
|||
// type: 'pie', |
|||
// selectedMode: 'single', |
|||
// radius: [0, '30%'], |
|||
// label: { |
|||
// position: 'inner', |
|||
// fontSize: 14 |
|||
// }, |
|||
// labelLine: { |
|||
// show: false |
|||
// }, |
|||
// }, |
|||
{ |
|||
name: receivingParameter.name, |
|||
type: 'pie', |
|||
radius: ['30%', '60%'], |
|||
labelLine: { |
|||
length: 10 |
|||
}, |
|||
label: { |
|||
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ', |
|||
formatter: ' {b|{b}：}{per|{d}%} \n{hr|}\n{c|{c}}',//d是百分比，c是数值，b是名称,a是name |
|||
|
|||
backgroundColor: '#F6F8FC', |
|||
borderColor: '#8C8D8E', |
|||
borderWidth: 1, |
|||
borderRadius: 4, |
|||
rich: { |
|||
a: { |
|||
color: '#6E7079', |
|||
lineHeight: 22, |
|||
align: 'center' |
|||
}, |
|||
hr: { |
|||
borderColor: '#8C8D8E', |
|||
width: '100%', |
|||
borderWidth: 1, |
|||
height: 0 |
|||
}, |
|||
b: { |
|||
color: '#4C5058', |
|||
fontSize: 14, |
|||
// fontWeight: 'bold', |
|||
// lineHeight: 33 |
|||
}, |
|||
per: { |
|||
color: '#fff', |
|||
backgroundColor: '#4C5058', |
|||
padding: [3, 4], |
|||
borderRadius: 4 |
|||
}, |
|||
c: { |
|||
align: 'center' // 样式c居中对齐 |
|||
} |
|||
} |
|||
}, |
|||
data: [ |
|||
{ value: receivingParameter.fininshNum, name: '已完成', itemStyle: { color: '#00A2E8', } },//天蓝色 |
|||
{ value: receivingParameter.unfininshNum, name: '未完成', itemStyle: { color: '#DCE0E6', } }, |
|||
], |
|||
} |
|||
] |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -0,0 +1,68 @@ |
|||
<template> |
|||
<v-chart :option="option" theme="auto" :autoresize="true" style="width: 100%; height: 200px" /> |
|||
</template> |
|||
|
|||
<script lang="ts" name="DonutChart" setup> |
|||
import { ref, reactive } from 'vue' |
|||
let receivingParameter = defineProps(["fininshNum", "unfininshNum", "name"]) |
|||
let option = reactive({}) |
|||
option = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b}: {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
// data: [ |
|||
// '已完成', |
|||
// '未完成' |
|||
// ], |
|||
left: 'left', |
|||
// orient: 'vertical', |
|||
}, |
|||
series: [ |
|||
// { |
|||
// name: 'Access From', |
|||
// type: 'pie', |
|||
// selectedMode: 'single', |
|||
// radius: [0, '30%'], |
|||
// label: { |
|||
// position: 'inner', |
|||
// fontSize: 14 |
|||
// }, |
|||
// labelLine: { |
|||
// show: false |
|||
// }, |
|||
// }, |
|||
{ |
|||
name: receivingParameter.name, |
|||
type: 'pie', |
|||
radius: ['50%', '80%'], |
|||
label: { |
|||
alignTo: 'edge', |
|||
formatter: '{name|{b}}\n{time|{c}元}\n{value|{d}%}', |
|||
minMargin: 5, |
|||
edgeDistance: 10, |
|||
lineHeight: 15, |
|||
rich: { |
|||
time: { |
|||
fontSize: 10, |
|||
color: '#999' |
|||
} |
|||
} |
|||
}, |
|||
labelLine: { |
|||
length: 10, |
|||
length2: 0, |
|||
maxSurfaceAngle: 80 |
|||
}, |
|||
data: [ |
|||
{ value: receivingParameter.fininshNum, name: '已支付', itemStyle: { color: '#53E3CC', } }, |
|||
{ value: receivingParameter.unfininshNum, name: '未支付', itemStyle: { color: '#CC0033 ', } }, |
|||
], |
|||
} |
|||
] |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -0,0 +1,51 @@ |
|||
<template> |
|||
<v-chart :option="option" theme="auto" :autoresize="true" style="width: 100%; height: 200px" /> |
|||
</template> |
|||
|
|||
<script lang="ts" name="PieChart" setup> |
|||
import { ref, reactive } from 'vue' |
|||
let receivingParameter = defineProps(["data"]) |
|||
let option = reactive({}) |
|||
option = { |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
legend: { |
|||
left: 'left', |
|||
orient: 'vertical', |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '项目状态', |
|||
type: 'pie', |
|||
radius: '90%', |
|||
data: receivingParameter.data, |
|||
// data: [ |
|||
// { value: 1048, name: '待入库' }, |
|||
// { value: 735, name: '入库中' }, |
|||
// { value: 580, name: '已入库' }, |
|||
// { value: 484, name: '计划审批中' }, |
|||
// { value: 300, name: '计划执行中' }, |
|||
// { value: 300, name: '已归档' }, |
|||
// { value: 1, name: '已出库' } |
|||
|
|||
|
|||
// ], |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
// emphasis: { |
|||
// itemStyle: { |
|||
// shadowBlur: 10, |
|||
// shadowOffsetX: 0, |
|||
// shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
// } |
|||
// } |
|||
} |
|||
] |
|||
}; |
|||
|
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -0,0 +1,193 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable"> |
|||
|
|||
<template v-for="(item, index) in planSummary" v-slot:[item.dataIndex]="{ record }"> |
|||
<div v-if="record[item.dataIndex]"> |
|||
<span>{{ record[item.dataIndex].taskName }}</span> |
|||
<Progress type="circle" :percent="record[item.dataIndex].percent" :size="20" :strokeColor="record[item.dataIndex].color" @click="handleViewPlanDetail(record[item.dataIndex].id, record[item.dataIndex].color)"></Progress> |
|||
</div> |
|||
</template> |
|||
<!-- <template #phaseNumber0="{ record }"> |
|||
<div v-if="record.phaseNumber0"> |
|||
<span>{{ record.phaseNumber0.taskName }}</span> |
|||
<Progress type="circle" :percent="record.phaseNumber0.percent" :size="20" :strokeColor="record.phaseNumber0.color"></Progress> |
|||
</div> |
|||
</template> |
|||
<template #phaseNumber1="{ record }"> |
|||
<div v-if="record.phaseNumber1"> |
|||
<span>{{ record.phaseNumber1.taskName }}</span> |
|||
<Progress type="circle" :percent="record.phaseNumber1.percent" :size="20" :strokeColor="record.phaseNumber1.color" ></Progress> |
|||
</div> |
|||
</template> |
|||
<template #phaseNumber2="{ record }"> |
|||
<div v-if="record.phaseNumber2"> |
|||
<span>{{ record.phaseNumber2.taskName }}</span> |
|||
<Progress type="circle" :percent="record.phaseNumber2.percent" :size="20" :strokeColor="record.phaseNumber2.color" ></Progress> |
|||
</div> |
|||
</template> |
|||
<template #phaseNumber3="{ record }"> |
|||
<div v-if="record.phaseNumber3"> |
|||
<span>{{ record.phaseNumber3.taskName }}</span> |
|||
<Progress type="circle" :percent="record.phaseNumber3.percent" :size="20" :strokeColor="record.phaseNumber3.color" ></Progress> |
|||
</div> |
|||
|
|||
|
|||
</template> |
|||
<template #phaseNumber4="{ record }"> |
|||
<div v-if="record.phaseNumber4"> |
|||
<span>{{ record.phaseNumber4.taskName }}</span> |
|||
<Progress type="circle" :percent="record.phaseNumber4.percent" :size="20" :strokeColor="record.phaseNumber4.color" ></Progress> |
|||
</div> |
|||
</template> |
|||
<template #phaseNumber5="{ record }"> |
|||
<div v-if="record.phaseNumber5"> |
|||
<span>{{ record.phaseNumber5.taskName }}</span> |
|||
<Progress type="circle" :percent="record.phaseNumber5.percent" :size="20" :strokeColor="record.phaseNumber5.color" ></Progress> |
|||
</div> |
|||
</template> |
|||
<template #phaseNumber6="{ record }"> |
|||
<div v-if="record.phaseNumber6"> |
|||
<span>{{ record.phaseNumber6.taskName }}</span> |
|||
<Progress type="circle" :percent="record.phaseNumber6.percent" :size="20" :strokeColor="record.phaseNumber6.color" ></Progress> |
|||
</div> |
|||
</template> --> |
|||
|
|||
</BasicTable> |
|||
<!-- <BasicModal @register="registeViewPlanDetail" title="项目计划详情" width="1200px" :showOkBtn="false"> |
|||
<viewPlanDetail :projectId="projectId" :projectStage="projectStage" /> |
|||
</BasicModal> |
|||
<BasicModal @register="registerProjectPlan" title="发起项目计划审批" width="1200px" :showOkBtn="false" |
|||
:showCancelBtn="false"> |
|||
<addPlan :type="type" :projectid="projectId" @close="closeProjectPlanModal()" /> |
|||
</BasicModal> --> |
|||
</PageWrapper> |
|||
|
|||
</template> |
|||
|
|||
<script lang="ts" name="indeForDashboard" setup> |
|||
//ts语法 |
|||
import { ref, onMounted } from 'vue'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { Progress } from 'ant-design-vue'; |
|||
|
|||
import { searchFormSchema } from '@/views/projectLib/projectInfo/projectInfo.data'; |
|||
import { planSummaryColumn } from '@/views/projectSummary/planSummary/planSummary.data'; |
|||
import { getplanSummary } from '@/views/projectSummary/planSummary/planSummary.api' |
|||
|
|||
onMounted(async () => { |
|||
|
|||
}) |
|||
let planSummary = ref<Array<any>>([]); |
|||
|
|||
const [registerTable, { setColumns }] = useTable({ |
|||
api: getplanSummary, |
|||
columns: planSummaryColumn, |
|||
rowKey:"projectName", |
|||
showIndexColumn:false, |
|||
useSearchForm: false, |
|||
// actionColumn: { |
|||
// width: 140, |
|||
// title: '操作', |
|||
// dataIndex: 'action', |
|||
// slots: { customRender: 'action' }, |
|||
// }, |
|||
afterFetch: (data) => { |
|||
planSummary.value.pop() |
|||
let temp = JSON.parse(JSON.stringify(planSummaryColumn)) |
|||
data.forEach(item => { |
|||
Object.entries(item).forEach(([key, value]) => { |
|||
if (key.includes("phaseNumber")) { |
|||
let keyExists = true; |
|||
Object.entries(temp).forEach(([keytemp, valuetemp]) => { |
|||
if (valuetemp.dataIndex == key) { |
|||
keyExists = false |
|||
return |
|||
} |
|||
}) |
|||
if (keyExists) { |
|||
temp.push({ |
|||
title: key.replace("phaseNumber", "阶段"), |
|||
dataIndex: key, |
|||
slots: { customRender: key }, |
|||
align:'left' |
|||
}) |
|||
planSummary.value.push({ |
|||
title: key, |
|||
dataIndex: key, |
|||
}) |
|||
} |
|||
} |
|||
|
|||
}); |
|||
}) |
|||
console.log("lanSummary.valu", planSummary.value); |
|||
setColumns(temp) |
|||
}, |
|||
//表单查询项设置 |
|||
formConfig: { |
|||
schemas: searchFormSchema, |
|||
} |
|||
|
|||
}); |
|||
function handleViewPlanDetail(projectId: string, color: string) { |
|||
console.log("handleViewPlanDetail", projectId, color); |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</script> |
|||
|
|||
<style scoped> |
|||
.timeline { |
|||
display: flex; |
|||
width: 100%; |
|||
margin-bottom: 100px; |
|||
|
|||
.lineitem { |
|||
transform: translateX(50%); |
|||
width: 25%; |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-timeline-item__tail { |
|||
border-left: none; |
|||
width: 100%; |
|||
border-top: 2px solid #e4e7ed; |
|||
position: absolute; |
|||
top: 6px; |
|||
} |
|||
|
|||
::v-deep .el-timeline-item__wrapper { |
|||
padding-left: 0; |
|||
position: absolute; |
|||
top: 20px; |
|||
transform: translateX(-50%); |
|||
text-align: center; |
|||
} |
|||
|
|||
::v-deep .el-timeline-item__timestamp { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.nested-timeline { |
|||
margin-left: 20px; |
|||
border-left: 1px dashed #ccc; |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
.nested-timeline-item { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
|
|||
::v-deep .ant-table-expanded-row { |
|||
height: auto !important; |
|||
/* 其他样式 */ |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue