通告浏览数据

src/MAR/noticeManage/modules/dataAnalysis.vue

@@ -7,7 +7,10 @@
         </a-tabs>
 
         <view class="row-box">
-            <view class="chart" :id="`LearningCondition_${props.id}`" />
+            <view class="chart">
+                <div class="chart-title">{{ activeKey == '1' ? '浏览数据' : '学习数据' }}</div>
+                <view :id="`LearningCondition_${props.id}`" class="chart-content" />
+            </view>
             <view class="right" v-if="activeKey == '1'">
                 <div class="normal-margin">
                     <p class="title">未浏览业务员</p>
@@ -42,7 +45,10 @@
             </view>
         </view>
         <view class="row-box" style="margin-top: 80px;">
-            <view class="chart" :id="`DownloadStatus_${props.id}`" />
+            <view class="chart">
+                <div class="chart-title">下载数据</div>
+                <view :id="`DownloadStatus_${props.id}`" class="chart-content" />
+            </view>
             <view class="right" v-if="activeKey == '1'">
                 <div class="normal-margin">
                     <p class="title">未下载经销商</p>
@@ -91,40 +97,6 @@ let props = defineProps({
     id: { type: [String, Number], required: true },
 })
 
-const params = ref([{
-    "classname": "webmanage.saletool.notice.statistics.agent",
-    "method": "getUnStudyList"
-}, {
-    "classname": "webmanage.saletool.notice.statistics.agent",
-    "method": "getstudyList"
-}, {
-    "classname": "webmanage.saletool.notice.statistics.team",
-    "method": "getUnStudyList"
-}, {
-    "classname": "webmanage.saletool.notice.statistics.team",
-    "method": "getstudyList"
-}, {
-    "classname": "webmanage.saletool.notice.statistics.agent",
-    "method": "getUnDownloadList"
-}, {
-    "classname": "webmanage.saletool.notice.statistics.agent",
-    "method": "getDownloadList"
-}, {
-    "classname": "webmanage.saletool.notice.statistics.team",
-    "method": "getUnDownloadList"
-}, {
-    "classname": "webmanage.saletool.notice.statistics.team",
-    "method": "getDownloadList"
-}].map(v => {
-    v.content = {
-        "sat_noticeid": props.id,
-        "pageNumber": 1,
-        "pageSize": 10,
-        "isAll": false
-    }
-    return v
-}))
-
 let activeKey = ref('1')
 let modeVisible = ref(false)
 
@@ -198,7 +170,7 @@ const renderPie = (data) => {
             type: 'outer',
             content: (item) => {
                 const percent = ((item.value / studyTotal) * 100).toFixed(1)
-                return percent == 'NaN' ? item.type : `${item.type}\n${percent}%`
+                return `${item.type}\n${percent == 'NaN' ? '0.00' : percent}%`
             },
             style: { fill: '#333', fontSize: 12 },
             labelLine: { style: { stroke: '#aaa', lineWidth: 1 } },
@@ -222,7 +194,7 @@ const renderPie = (data) => {
             type: 'outer',
             content: (item) => {
                 const percent = ((item.value / downloadTotal) * 100).toFixed(1)
-                return percent == 'NaN' ? item.type : `${item.type}\n${percent}%`
+                return `${item.type}\n${percent == 'NaN' ? '0.00' : percent}%`
             },
             style: { fill: '#333', fontSize: 12 },
             labelLine: { style: { stroke: '#aaa', lineWidth: 1 } },
@@ -238,6 +210,42 @@ const renderPie = (data) => {
     studyPieInstance.value.render()
     downloadPieInstance.value.render()
 }
+
+
+const params = ref([{
+    "classname": "webmanage.saletool.notice.statistics.agent",
+    "method": "getUnStudyList"
+}, {
+    "classname": "webmanage.saletool.notice.statistics.agent",
+    "method": "getstudyList"
+}, {
+    "classname": "webmanage.saletool.notice.statistics.team",
+    "method": "getUnStudyList"
+}, {
+    "classname": "webmanage.saletool.notice.statistics.team",
+    "method": "getstudyList"
+}, {
+    "classname": "webmanage.saletool.notice.statistics.agent",
+    "method": "getUnDownloadList"
+}, {
+    "classname": "webmanage.saletool.notice.statistics.agent",
+    "method": "getDownloadList"
+}, {
+    "classname": "webmanage.saletool.notice.statistics.team",
+    "method": "getUnDownloadList"
+}, {
+    "classname": "webmanage.saletool.notice.statistics.team",
+    "method": "getDownloadList"
+}].map(v => {
+    v.content = {
+        "sat_noticeid": props.id,
+        "pageNumber": 1,
+        "pageSize": 10,
+        "isAll": false
+    }
+    return v
+}))
+
 </script>
 
 <style lang="less" scoped>
@@ -247,11 +255,33 @@ const renderPie = (data) => {
     width: 100%;
 
     .chart {
+        display: flex;
+        flex-direction: column;
         box-sizing: border-box;
         padding: 10px;
         flex: 0 0 30%;
         height: 100%;
         min-width: 0;
+        position: relative;
+
+        .chart-title {
+            position: absolute;
+            top: 0;
+            left: 0;
+            text-align: center;
+            font-weight: bold;
+            font-size: 16px;
+            margin-bottom: 10px;
+            flex-shrink: 0;
+            z-index: 9999999999;
+            color: #333333;
+        }
+
+        .chart-content {
+            flex: 1;
+            width: 100%;
+            min-height: 0;
+        }
     }
 
     .right {
@@ -264,6 +294,7 @@ const renderPie = (data) => {
             align-items: center;
             justify-content: space-between;
             margin-top: 30px;
+
             .title {
                 height: 20px;
                 line-height: 20px;
@@ -275,11 +306,6 @@ const renderPie = (data) => {
                 border-left: .3rem solid #3874F6;
             }
         }
-
-
-
     }
-
-    // right 下方的第二个normal-margin 上边距40px
 }
 </style>