fix:系统迭代

src/api/homePage.ts

@@ -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",
+  });
+}

src/styles/element-plus.scss

@@ -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;
 }

src/views/data-statistics/left-side/components/portrait.vue

@@ -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_con" style="width: 200px;">
-        <div
+        <el-tree-select
-          class="module_top_title"
+            v-model="listperformid"
-          v-for="(item, index) in label"
+            :data="treelist"
-          :key="index"
+            :render-after-expand="false"
-          @click="clickMenuOption(item.id)"
+            check-strictly
-          :class="
+            :filter-node-method="filterPostMethod"
-            item.check == true
+            filterable
-              ? 'module_menu_selected'
+            @change="filterPostchange"
-              : 'module_menu_notSelected'
+            clearable
-          "
+          />
-        >
-          {{ item.title }}
-        </div>
       </div>
     </TitleD>
     <div class="portrait_con conBox">
-      <div
+      <!-- 222222222222222
-        class="portrait_con_options"
+      <div>
-        v-for="(item, index) in portraitList"
+        <img style="width: 100%;" src="@/assets/images/home-page/left/lingjiangtai.png" alt="" />
-        :key="index"
+      </div> -->
-      >
+      <div class="podium-container">  
-        <div>
+        <img src="@/assets/images/home-page/left/lingjiangtai.png" alt="Podium" class="podium-img">  
-          <div>
+        <div class="name-position" v-for="(item, index) in portraitList" :key="index">  
-            <span>{{ index + 1 }}</span>
+          {{ item.chinaName }}  
-            <span v-if="labelId == 1" @click="toBackgroundManage()"
+        </div>  
-              >{{ 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>
       </div>
     </div>
   </div>
@@ -57,55 +38,47 @@ export default defineComponent({
 });
 </script>
 <script setup lang='ts'>
-import { workPerformProgress } from "@/api/homePage";
+import { staPerformProgress,getListperformTree } from "@/api/homePage";
-const labelId = ref(1);
+const listperformid = ref('');
-const label = ref([
+const portraitList = ref([]);
-  { title: "镇干部", check: true, id: 1 },
+const treelist = ref([]) 
-  { title: "村(社区)干部", check: false, id: 2 },
+const names = ref(['John Doe', 'Jane Doe', 'Alice Johnson'])
-  { title: "党员", check: false, id: 3 },
+//获取list
-]);
-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
 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 = () => {
+const filterPostMethod = (value, data) => data.label.includes(value);
-  window.open(
+const filterPostchange = () => {
-    "https://dfxs.sczysoft.com/#/system/base/servicerating",
+  getWorkPerformProgress();
-    "_blank"
+}
-  );
+//岗位树形
+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>