fix:系统迭代
This commit is contained in:
HH
parent
6f6a738920
commit
fc561875fd
|
|
@ -107,3 +107,23 @@ export function workPerformProgress(params) {
|
|||
params: params
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 履职情况列表：按岗位
|
||||
*/
|
||||
export function staPerformProgress(params) {
|
||||
return request({
|
||||
url: `/screen/statistic/workPerformProgress`,
|
||||
method: "GET",
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 岗位树形
|
||||
*/
|
||||
export function getListperformTree() {
|
||||
return request({
|
||||
url: `/screen/statistic/getListperformTree`,
|
||||
method: "GET",
|
||||
});
|
||||
}
|
||||
BIN
src/assets/images/home-page/left/lingjiangtai.png
Normal file
BIN
src/assets/images/home-page/left/lingjiangtai.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -363,4 +363,16 @@ table {
|
|||
.inline-block {
|
||||
width: 94%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select__wrapper {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
background-color: #2c5473 !important;
|
||||
}
|
||||
|
||||
.el-select__placeholder {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
|
@ -3,48 +3,29 @@
|
|||
<div class="side-bg">
|
||||
<TitleC title="精准画像"></TitleC>
|
||||
<TitleD width="100">
|
||||
<div class="module_top_title_con">
|
||||
<div
|
||||
class="module_top_title"
|
||||
v-for="(item, index) in label"
|
||||
:key="index"
|
||||
@click="clickMenuOption(item.id)"
|
||||
:class="
|
||||
item.check == true
|
||||
? 'module_menu_selected'
|
||||
: 'module_menu_notSelected'
|
||||
"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="module_top_title_con" style="width: 200px;">
|
||||
<el-tree-select
|
||||
v-model="listperformid"
|
||||
:data="treelist"
|
||||
:render-after-expand="false"
|
||||
check-strictly
|
||||
:filter-node-method="filterPostMethod"
|
||||
filterable
|
||||
@change="filterPostchange"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</TitleD>
|
||||
<div class="portrait_con conBox">
|
||||
<div
|
||||
class="portrait_con_options"
|
||||
v-for="(item, index) in portraitList"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<span>{{ index + 1 }}</span>
|
||||
<span v-if="labelId == 1" @click="toBackgroundManage()"
|
||||
>{{ item.chinaName }}-{{ item.postName }}</span
|
||||
>
|
||||
<span v-else>{{ item.orgName }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.percentage }}</span>
|
||||
<span>{{ item.completedNum }}/{{ item.totalNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-slider
|
||||
disabled
|
||||
v-model="item.completedNum"
|
||||
:max="item.totalNum"
|
||||
/>
|
||||
</div>
|
||||
<!-- 222222222222222
|
||||
<div>
|
||||
<img style="width: 100%;" src="@/assets/images/home-page/left/lingjiangtai.png" alt="" />
|
||||
</div> -->
|
||||
<div class="podium-container">
|
||||
<img src="@/assets/images/home-page/left/lingjiangtai.png" alt="Podium" class="podium-img">
|
||||
<div class="name-position" v-for="(item, index) in portraitList" :key="index">
|
||||
{{ item.chinaName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,55 +38,47 @@ export default defineComponent({
|
|||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import { workPerformProgress } from "@/api/homePage";
|
||||
const labelId = ref(1);
|
||||
const label = ref([
|
||||
{ title: "镇干部", check: true, id: 1 },
|
||||
{ title: "村(社区)干部", check: false, id: 2 },
|
||||
{ title: "党员", check: false, id: 3 },
|
||||
]);
|
||||
const clickMenuOption = (id: any) => {
|
||||
labelId.value = id;
|
||||
label.value.forEach((item) => {
|
||||
item.check = false;
|
||||
if (item.id == id) {
|
||||
item.check = true;
|
||||
}
|
||||
});
|
||||
getWorkPerformProgress();
|
||||
};
|
||||
const portraitList = ref([
|
||||
{ label: "某某人-职位", value: 48 },
|
||||
{ label: "某某人-职位", value: 40 },
|
||||
{ label: "某某人-职位", value: 38 },
|
||||
{ label: "某某人-职位", value: 18 },
|
||||
{ label: "某某人-职位", value: 48 },
|
||||
]);
|
||||
//获取应急队伍list
|
||||
import { staPerformProgress,getListperformTree } from "@/api/homePage";
|
||||
const listperformid = ref('');
|
||||
const portraitList = ref([]);
|
||||
const treelist = ref([])
|
||||
const names = ref(['John Doe', 'Jane Doe', 'Alice Johnson'])
|
||||
//获取list
|
||||
const getWorkPerformProgress = () => {
|
||||
let params = {
|
||||
sysYear: null,
|
||||
typeId: labelId.value,
|
||||
listperformid: listperformid.value,
|
||||
pageType:2,
|
||||
};
|
||||
workPerformProgress(params).then((res: any) => {
|
||||
staPerformProgress(params).then((res: any) => {
|
||||
portraitList.value = res.data;
|
||||
portraitList.value.forEach((item) => {
|
||||
item.percentage =
|
||||
Math.round((item.completedNum / item.totalNum).toFixed(2) * 10000) /
|
||||
100.0 +
|
||||
"%";
|
||||
});
|
||||
});
|
||||
};
|
||||
//跳转后台
|
||||
const toBackgroundManage = () => {
|
||||
window.open(
|
||||
"https://dfxs.sczysoft.com/#/system/base/servicerating",
|
||||
"_blank"
|
||||
);
|
||||
/**筛选组织*/
|
||||
const filterPostMethod = (value, data) => data.label.includes(value);
|
||||
const filterPostchange = () => {
|
||||
getWorkPerformProgress();
|
||||
}
|
||||
//岗位树形
|
||||
const getgetListperformTree = () => {
|
||||
getListperformTree().then((res: any) => {
|
||||
treelist.value = handlePostData(res.data);
|
||||
})
|
||||
}
|
||||
/**处理组织数据 */
|
||||
let handlePostData = (list) => {
|
||||
let data = list.map((item) => {
|
||||
return {
|
||||
label: item.performclassname,
|
||||
value: item.listperformid,
|
||||
children: item.children ? handlePostData(item.children) : [],
|
||||
};
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getgetListperformTree();
|
||||
getWorkPerformProgress();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -183,4 +156,40 @@ onMounted(() => {
|
|||
height: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.podium-container {
|
||||
position: relative;
|
||||
display: flex; /* 或者其他，取决于你的布局需求 */
|
||||
flex-direction: column-reverse;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.podium-img {
|
||||
width: 100%; /* 或具体宽度 */
|
||||
height: 80%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name-position {
|
||||
position: absolute;
|
||||
color: #fff; /* 假设背景是深色，文字需要浅色 */
|
||||
font-size: 20px; /* 字体大小根据需要调整 */
|
||||
font-weight: bold;
|
||||
/* 接下来根据图片和需要调整每个名字的具体位置 */
|
||||
/* 例如，对于第一个名字，可以放在顶部中央 */
|
||||
&:nth-child(2) {
|
||||
top: 0px; /* 顶部偏移 */
|
||||
left: 50%; /* 水平中心 */
|
||||
transform: translateX(-50%); /* 校正水平偏移 */
|
||||
}
|
||||
/* 对于第二个和第三个名字，你可能需要调整top和left的值 */
|
||||
&:nth-child(3) {
|
||||
bottom: 110px;
|
||||
left: 13%;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
bottom: 96px;
|
||||
left: 76%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user