From 89624e34d90f0202df64ec0d91de9c5167b65920 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Thu, 24 Oct 2024 13:56:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=80=A7=E5=88=AB=E5=9B=BE=E8=A1=A8=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/pie-charts-model-girl.vue      | 88 +++++++++++++++++++
 .../index/components/pie-charts-model-man.vue | 87 ++++++++++++++++++
 pages/realName/index/index.vue                | 33 ++++---
 3 files changed, 196 insertions(+), 12 deletions(-)
 create mode 100644 pages/realName/index/components/pie-charts-model-girl.vue
 create mode 100644 pages/realName/index/components/pie-charts-model-man.vue

diff --git a/pages/realName/index/components/pie-charts-model-girl.vue b/pages/realName/index/components/pie-charts-model-girl.vue
new file mode 100644
index 0000000..9f8c67e
--- /dev/null
+++ b/pages/realName/index/components/pie-charts-model-girl.vue
@@ -0,0 +1,88 @@
+<template>
+  <view class="charts-container">
+    <qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" @getIndex="handleChartClick" />
+  </view>
+</template>
+
+<script>
+import { getHomePageListApi } from '@/api/phaseTwo/homePage'
+export default {
+  data() {
+    return {
+      chartData: {},
+      opts: {
+        color: ['#fc8483', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
+        padding: undefined,
+        backgroundColor: '#fc8483',
+        title: {
+          name: '',
+          fontSize: 0,
+          color: ''
+        },
+        subtitle: {
+          name: '',
+          fontSize: 0,
+          color: ''
+        },
+        extra: {
+          arcbar: {
+            type: 'default',
+            width: 14,
+            backgroundColor: '#E9E9E9',
+            startAngle: 0.25,
+            endAngle: 0.75,
+            gap: 2,
+            direction: 'ccw',
+            linearType: 'custom'
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getServerData()
+  },
+  methods: {
+    getServerData() {
+      getHomePageListApi().then(res => {
+        setTimeout(() => {
+          const { workerMsgBean } = res.data
+
+          const maleNum = workerMsgBean.maleNum
+          const femaleNum = workerMsgBean.femaleNum
+          const dataGirl = femaleNum / (maleNum + femaleNum)
+          let data = {
+            series: [
+              {
+                color: '#fc8483',
+                backgroundColor: '#fc8483',
+                data: dataGirl
+              }
+            ]
+          }
+          this.chartData = JSON.parse(JSON.stringify(data))
+        }, 500)
+      })
+    },
+    handleChartClick(index) {
+      //   const { currentIndex } = index // 获取当前点击的图表索引
+      //   const chartsData = this.chartData.series[0].data
+      //   const currenRows = chartsData[currentIndex]
+      //   console.log('currenRows选中的工程类型', currenRows.name)
+      //   // 电压等级信息
+      //   const voltageLevel = {
+      //     currentIndex,
+      //     name: currenRows.name
+      //   }
+      //   uni.navigateTo({ url: `/pages/realName/index/pages/project?voltageLevel=${JSON.stringify(voltageLevel)}` })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.charts-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/pages/realName/index/components/pie-charts-model-man.vue b/pages/realName/index/components/pie-charts-model-man.vue
new file mode 100644
index 0000000..57dd2c8
--- /dev/null
+++ b/pages/realName/index/components/pie-charts-model-man.vue
@@ -0,0 +1,87 @@
+<template>
+  <view class="charts-container">
+    <qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" @getIndex="handleChartClick" />
+  </view>
+</template>
+
+<script>
+import { getHomePageListApi } from '@/api/phaseTwo/homePage'
+export default {
+  data() {
+    return {
+      chartData: {},
+      opts: {
+        color: ['#67cde6', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
+        backgroundColor: '#67cde6',
+        padding: undefined,
+        title: {
+          name: '',
+          fontSize: 0,
+          color: '#2fc25b'
+        },
+        subtitle: {
+          name: '',
+          fontSize: 0,
+          color: '#666666'
+        },
+        extra: {
+          arcbar: {
+            type: 'default',
+            width: 14,
+            backgroundColor: '#E9E9E9',
+            startAngle: 0.75,
+            endAngle: 0.25,
+            gap: 2,
+            linearType: 'custom'
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getServerData()
+  },
+  methods: {
+    getServerData() {
+      getHomePageListApi().then(res => {
+        setTimeout(() => {
+          const { workerMsgBean } = res.data
+
+          const maleNum = workerMsgBean.maleNum
+          const femaleNum = workerMsgBean.femaleNum
+          const dataBoy = maleNum / (maleNum + femaleNum)
+          let data = {
+            series: [
+              {
+                color: '#67cde6',
+                backgroundColor: '#67cde6',
+                data: dataBoy
+              }
+            ]
+          }
+          this.chartData = JSON.parse(JSON.stringify(data))
+        }, 500)
+      })
+    },
+    handleChartClick(index) {
+      //   const { currentIndex } = index // 获取当前点击的图表索引
+      //   const chartsData = this.chartData.series[0].data
+      //   const currenRows = chartsData[currentIndex]
+      //   console.log('currenRows选中的工程类型', currenRows.name)
+      //   // 电压等级信息
+      //   const voltageLevel = {
+      //     currentIndex,
+      //     name: currenRows.name
+      //   }
+      //   uni.navigateTo({ url: `/pages/realName/index/pages/project?voltageLevel=${JSON.stringify(voltageLevel)}` })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.charts-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/pages/realName/index/index.vue b/pages/realName/index/index.vue
index 4c60c85..98a64ea 100644
--- a/pages/realName/index/index.vue
+++ b/pages/realName/index/index.vue
@@ -222,18 +222,15 @@
               <view>男({{ maleNum }})</view>
             </view>
 
-            <view
-              @tap="onJumpColorLight(4)"
-              class="gender-img"
-              style="margin-left: 30rpx; background-color: #67cde6"
-            ></view>
+            <view @tap="onJumpColorLight(4)" class="gender-img" style="margin-left: 30rpx">
+              <PieChartsModelMan />
+            </view>
           </view>
           <view class="girl-right">
-            <view
-              @tap="onJumpColorLight(5)"
-              class="gender-img"
-              style="margin-right: 30rpx; background-color: #fc8483"
-            ></view>
+            <view @tap="onJumpColorLight(5)" class="gender-img" style="margin-right: 30rpx">
+              <PieChartsModelGirl />
+            </view>
+
             <view>
               <view>
                 {{
@@ -346,13 +343,18 @@ import PieChartsModel from './components/pie-charts-model'
 import BarChartsModel from './components/bar-charts-model'
 import PieChartsModelRing from './components/pie-charts-model-ring'
 import PieChartsModelRingTwo from './components/pie-charts-model-ring-two'
+import PieChartsModelMan from './components/pie-charts-model-man.vue'
+import PieChartsModelGirl from './components/pie-charts-model-girl.vue'
 import { getHomePageListApi } from '@/api/phaseTwo/homePage'
+
 export default {
   components: {
     PieChartsModel,
     BarChartsModel,
     PieChartsModelRing,
-    PieChartsModelRingTwo
+    PieChartsModelRingTwo,
+    PieChartsModelMan,
+    PieChartsModelGirl
   },
   data() {
     return {
@@ -516,6 +518,7 @@ export default {
       this.getPro()
     }
   },
+
   onShow() {
     if (this.type.indexOf('4') > -1) {
       //监督端
@@ -1195,7 +1198,7 @@ export default {
       .gender-img {
         width: 120rpx;
         height: 240rpx;
-        background-color: orange;
+        // background-color: orange;
       }
     }
   }
@@ -1240,4 +1243,10 @@ export default {
 .gender-img {
   border-radius: 18rpx;
 }
+
+.demo {
+  width: 100%;
+  height: 500rpx;
+  background-color: orange;
+}
 </style>