通告详情数据

src/MAR/noticeManage/modules/dataAnalysis.vue

@@ -8,11 +8,73 @@
 
         <view class="row-box">
             <view class="chart" :id="`LearningCondition_${props.id}`" />
-            <view class="right"></view>
+            <view class="right" v-if="activeKey == '1'">
+                <div class="normal-margin">
+                    <p class="title">未浏览业务员</p>
+                    <exportExcel :param="params[0]" type="button" tableName="tableUnstudy" />
+                </div>
+                <normalTable @listData="handleData" rowKey="rowindex" :is-select="false" ref="table" size="small"
+                    :columns="utils.TBLayout('tableUnstudy')" :param="params[0]">
+                </normalTable>
+                <div class="normal-margin">
+                    <p class="title">已浏览业务员</p>
+                    <exportExcel :param="params[1]" type="button" tableName="tableStudy" />
+                </div>
+                <normalTable @listData="handleData" rowKey="rowindex" :is-select="false" ref="table" size="small"
+                    :columns="utils.TBLayout('tableStudy')" :param='params[1]'>
+                </normalTable>
+            </view>
+            <view v-else class="right">
+                <div class="normal-margin">
+                    <p class="title">未浏览业务员</p>
+                    <exportExcel :param="params[2]" type="button" tableName="groupUNTableStudy" />
+                </div>
+                <normalTable @listData="handleData" rowKey="rowindex" :is-select="false" ref="table" size="small"
+                    :columns="utils.TBLayout('groupUNTableStudy')" :param='params[2]'>
+                </normalTable>
+                <div class="normal-margin">
+                    <p class="title">已浏览业务员</p>
+                    <exportExcel :param="params[3]" type="button" tableName="groupTableStudy" />
+                </div>
+                <normalTable @listData="handleData" rowKey="rowindex" :is-select="false" ref="table" size="small"
+                    :columns="utils.TBLayout('groupTableStudy')" :param='params[3]'>
+                </normalTable>
+            </view>
         </view>
-        <view class="row-box">
+        <view class="row-box" style="margin-top: 80px;">
             <view class="chart" :id="`DownloadStatus_${props.id}`" />
-            <view class="right"></view>
+            <view class="right" v-if="activeKey == '1'">
+                <div class="normal-margin">
+                    <p class="title">未下载经销商</p>
+                    <exportExcel :param="params[4]" type="button" tableName="tableUnstudy" />
+                </div>
+                <normalTable @listData="handleData" rowKey="rowindex" :is-select="false" ref="table" size="small"
+                    :columns="utils.TBLayout('tableUnstudy')" :param='params[4]'>
+                </normalTable>
+                <div class="normal-margin">
+                    <p class="title">已下载经销商</p>
+                    <exportExcel :param="params[5]" type="button" tableName="tableDownload" />
+                </div>
+                <normalTable @listData="handleData" rowKey="rowindex" :is-select="false" ref="table" size="small"
+                    :columns="utils.TBLayout('tableDownload')" :param='params[5]'>
+                </normalTable>
+            </view>
+            <view v-else class="right">
+                <div class="normal-margin">
+                    <p class="title">未下载业务员</p>
+                    <exportExcel :param="params[6]" type="button" tableName="groupUNTableStudy" />
+                </div>
+                <normalTable @listData="handleData" rowKey="rowindex" :is-select="false" ref="table" size="small"
+                    :columns="utils.TBLayout('groupUNTableStudy')" :param='params[6]'>
+                </normalTable>
+                <div class="normal-margin">
+                    <p class="title">已下载业务员</p>
+                    <exportExcel :param="params[7]" type="button" tableName="groupTableDownload" />
+                </div>
+                <normalTable @listData="handleData" rowKey="rowindex" :is-select="false" ref="table" size="small"
+                    :columns="utils.TBLayout('groupTableDownload')" :param='params[7]'>
+                </normalTable>
+            </view>
         </view>
     </a-drawer>
 </template>
@@ -21,11 +83,48 @@
 import { ref, defineProps } from 'vue'
 import Api from '@/api/api'
 import { Pie } from '@antv/g2plot'
+import normalTable from '@/template/MARnormalTable/index.vue';
+import utils from '@/utils/utils'
+import exportExcel from '@/components/tableExport/index.vue'
 
 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)
 
@@ -42,6 +141,7 @@ const init = () => {
     getDealerAnalysis()
 }
 
+// 饼图
 const getDealerAnalysis = async () => {
     let res = await Api.requested(activeKey.value == 1 ? {
         "classname": "webmanage.saletool.notice.statistics.agent",
@@ -56,7 +156,6 @@ const getDealerAnalysis = async () => {
     // 假设接口返回实际数据，这里用模拟数据
     renderPie(res.data);
 }
-
 const renderPie = (data) => {
     // 根据 props.id 获取唯一的容器
     const studyContainerId = `LearningCondition_${props.id}`
@@ -78,8 +177,8 @@ const renderPie = (data) => {
 
     // 学习情况数据
     const studyData = [
-        { type: '已学习', value: data.studyNum },
-        { type: '未学习', value: data.unStudyNum },
+        { type: activeKey.value == 1 ? '已浏览' : '已学习', value: data.studyNum },
+        { type: activeKey.value == 1 ? '未浏览' : '未学习', value: data.unStudyNum }
     ]
 
     // 下载情况数据
@@ -99,7 +198,7 @@ const renderPie = (data) => {
             type: 'outer',
             content: (item) => {
                 const percent = ((item.value / studyTotal) * 100).toFixed(1)
-                return `${item.type}\n${percent}%`
+                return percent == 'NaN' ? item.type : `${item.type}\n${percent}%`
             },
             style: { fill: '#333', fontSize: 12 },
             labelLine: { style: { stroke: '#aaa', lineWidth: 1 } },
@@ -123,7 +222,7 @@ const renderPie = (data) => {
             type: 'outer',
             content: (item) => {
                 const percent = ((item.value / downloadTotal) * 100).toFixed(1)
-                return `${item.type}\n${percent}%`
+                return percent == 'NaN' ? item.type : `${item.type}\n${percent}%`
             },
             style: { fill: '#333', fontSize: 12 },
             labelLine: { style: { stroke: '#aaa', lineWidth: 1 } },
@@ -141,28 +240,46 @@ const renderPie = (data) => {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .row-box {
     display: flex;
     align-items: center;
     width: 100%;
-    height: 700px;
-}
 
-.row-box .chart {
-    box-sizing: border-box;
-    padding: 10px;
-    flex: 0 0 30%;
-    height: 100%;
-    min-width: 0;
-}
+    .chart {
+        box-sizing: border-box;
+        padding: 10px;
+        flex: 0 0 30%;
+        height: 100%;
+        min-width: 0;
+    }
+
+    .right {
+        flex: 1;
+        height: 100%;
+        min-width: 0;
+
+        .normal-margin {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 30px;
+            .title {
+                height: 20px;
+                line-height: 20px;
+                font-size: 14px;
+                text-indent: 7px;
+                font-weight: bold;
+                color: #333333;
+                margin-bottom: 20px;
+                border-left: .3rem solid #3874F6;
+            }
+        }
+
 
-.row-box .right {
-    flex: 1;
-    height: 100%;
-    min-width: 0;
-}
 
-/* 由于 id 是动态的，样式选择器无法直接使用 id，所以改用 class 选择器或使用属性选择器 */
-/* 这里我们已经在 .chart 上设置了样式，内部容器会继承宽高 */
+    }
+
+    // right 下方的第二个normal-margin 上边距40px
+}
 </style>