推广素材数据展示样式修改

src/HManagement/archives_ad/dataAnalysis/modules/adDownloadData.vue

@@ -1,49 +1,56 @@
 <template>
     <div class="content">
         <header>下载数据</header>
-        <div class="chart-box">
-            <div :id="type + 'pie2'" style="width:50%;"></div>
-        </div>
-        <div class="title-box">
-            <div class="title">未下载{{ type == 'agency' ? '经销商' : '业务员' }}</div>
-            <exportExcel :tablecols="unDownload.tablecols" :param="unDownload.params"
-                :excelTitle="type == 'agency' ? '推广素材经销商未下载表' : '推广素材团队未下载表'" />
-        </div>
-        <!-- 未下载表格 -->
-        <tableLayout style="margin-top:16px" :layout="unDownload.tablecols" :data="unDownload.list" :custom="true">
-            <template v-slot:customcol="scope">
-                <div v-if="scope.column.columnname == 'region'">
-                    {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
+        <div class="main">
+            <div class="chart-box">
+                <div :id="type + 'pie2'"  style="width:100%"></div>
+            </div>
+            <div style="flex:1;">
+                <div class="title-box">
+                    <div class="title">未下载{{ type == 'agency' ? '经销商' : '业务员' }}</div>
+                    <exportExcel :tablecols="unDownload.tablecols" :param="unDownload.params"
+                        :excelTitle="type == 'agency' ? '推广素材经销商未下载表' : '推广素材团队未下载表'" />
                 </div>
-                <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
-            </template>
-        </tableLayout>
-        <div style="margin-top:16px;text-align:right">
-            <el-pagination background small @current-change="handlUnCurrentChange" :current-page="unDownload.pageNumber"
-                :page-size="unDownload.pageSize" layout="total, prev, pager, next, jumper" :total="unDownload.total">
-            </el-pagination>
-        </div>
-        <div class="title-box" style="margin-top:30px">
-            <div class="title">已下载{{ type == 'agency' ? '经销商' : '业务员' }}</div>
-            <exportExcel :tablecols="download.tablecols" :param="download.params"
-                :excelTitle="type == 'agency' ? '推广素材经销商已下载表' : '推广素材团队已下载表'" />
-        </div>
-        <!-- 已读表格 -->
-        <tableLayout style="margin-top:16px" :layout="download.tablecols" :data="download.list" :custom="true">
-            <template v-slot:customcol="scope">
-                <div v-if="scope.column.columnname == 'region'">
-                    {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
+                <!-- 未下载表格 -->
+                <tableLayout style="margin-top:16px" :layout="unDownload.tablecols" :data="unDownload.list"
+                    :custom="true">
+                    <template v-slot:customcol="scope">
+                        <div v-if="scope.column.columnname == 'region'">
+                            {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
+                        </div>
+                        <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
+                    </template>
+                </tableLayout>
+                <div style="margin-top:16px;text-align:right">
+                    <el-pagination background small @current-change="handlUnCurrentChange"
+                        :current-page="unDownload.pageNumber" :page-size="unDownload.pageSize"
+                        layout="total, prev, pager, next, jumper" :total="unDownload.total">
+                    </el-pagination>
                 </div>
-                <div v-else-if="scope.column.columnname == 'isdownloadfile'">
-                    {{ scope.column.data.isdownloadfile == 1 ? '是' : '否' }}
+                <div class="title-box" style="margin-top:30px">
+                    <div class="title">已下载{{ type == 'agency' ? '经销商' : '业务员' }}</div>
+                    <exportExcel :tablecols="download.tablecols" :param="download.params"
+                        :excelTitle="type == 'agency' ? '推广素材经销商已下载表' : '推广素材团队已下载表'" />
                 </div>
-                <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
-            </template>
-        </tableLayout>
-        <div style="margin-top:16px;text-align:right">
-            <el-pagination background small @current-change="handlCurrentChange" :current-page="download.pageNumber"
-                :page-size="download.pageSize" layout="total, prev, pager, next, jumper" :total="download.total">
-            </el-pagination>
+                <!-- 已读表格 -->
+                <tableLayout style="margin-top:16px" :layout="download.tablecols" :data="download.list" :custom="true">
+                    <template v-slot:customcol="scope">
+                        <div v-if="scope.column.columnname == 'region'">
+                            {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
+                        </div>
+                        <div v-else-if="scope.column.columnname == 'isdownloadfile'">
+                            {{ scope.column.data.isdownloadfile == 1 ? '是' : '否' }}
+                        </div>
+                        <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
+                    </template>
+                </tableLayout>
+                <div style="margin-top:16px;text-align:right">
+                    <el-pagination background small @current-change="handlCurrentChange"
+                        :current-page="download.pageNumber" :page-size="download.pageSize"
+                        layout="total, prev, pager, next, jumper" :total="download.total">
+                    </el-pagination>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -53,7 +60,7 @@ import exportExcel from "@/components/export_excel";
 import { Pie } from '@antv/g2plot';
 export default {
     props: ["type"],
-    components:{exportExcel},
+    components: { exportExcel },
     data() {
         return {
             //已下载
@@ -83,6 +90,7 @@ export default {
                 angleField: 'value',
                 colorField: 'type',
                 radius: 0.75,
+                color: ['#38C2F6','#5D76E4'],
                 legend: {
                     position: 'leftTop'
                 },
@@ -179,12 +187,4 @@ export default {
 
 <style scoped>
 @import url('./public.css');
-
-.chart-box {
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    width: 100%;
-    margin-top: 40px;
-}
 </style>

src/HManagement/archives_ad/dataAnalysis/modules/adReadData.vue

@@ -1,52 +1,58 @@
 <template>
     <div class="content">
         <header>浏览数据</header>
-        <div class="chart-box">
-            <div :id="type + 'pie1'" style="width:50%;"></div>
-        </div>
-        <div class="title-box">
-            <div class="title">未浏览{{ type == 'agency' ? '经销商' : '业务员' }}</div>
-            <exportExcel :tablecols="unReadData.tablecols" :param="unReadData.params"
-                :excelTitle="type == 'agency' ? '推广素材经销商未浏览表' : '推广素材团队未浏览表'" />
-        </div>
-        <!-- 未读表格 -->
-        <tableLayout style="margin-top:16px" :layout="unReadData.tablecols" :data="unReadData.list" :custom="true">
-            <template v-slot:customcol="scope">
-                <div v-if="scope.column.columnname == 'region'">
-                    {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
-                </div>
-                <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
-            </template>
-        </tableLayout>
-        <div style="margin-top:16px;text-align:right">
-            <el-pagination background small @current-change="handlUnReadCurrentChange"
-                :current-page="unReadData.pageNumber" :page-size="unReadData.pageSize"
-                layout="total, prev, pager, next, jumper" :total="unReadData.total">
-            </el-pagination>
-        </div>
+        <div class="main">
+            <div class="chart-box">
+                <div :id="type + 'pie1'" style="width:100%"></div>
+            </div>
 
-        <div class="title-box" style="margin-top:30px">
-            <div class="title">已浏览{{ type == 'agency' ? '经销商' : '业务员' }}</div>
-            <exportExcel :tablecols="readData.tablecols" :param="readData.params"
-                :excelTitle="type == 'agency' ? '推广素材经销商已浏览表' : '推广素材团队已浏览表'" />
-        </div>
+            <div style="flex:1;">
+                <div class="title-box">
+                    <div class="title">未浏览{{ type == 'agency' ? '经销商' : '业务员' }}</div>
+                    <exportExcel :tablecols="unReadData.tablecols" :param="unReadData.params"
+                        :excelTitle="type == 'agency' ? '推广素材经销商未浏览表' : '推广素材团队未浏览表'" />
+                </div>
+                <!-- 未读表格 -->
+                <tableLayout style="margin-top:16px" :layout="unReadData.tablecols" :data="unReadData.list"
+                    :custom="true">
+                    <template v-slot:customcol="scope">
+                        <div v-if="scope.column.columnname == 'region'">
+                            {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
+                        </div>
+                        <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
+                    </template>
+                </tableLayout>
+                <div style="margin-top:16px;text-align:right">
+                    <el-pagination background small @current-change="handlUnReadCurrentChange"
+                        :current-page="unReadData.pageNumber" :page-size="unReadData.pageSize"
+                        layout="total, prev, pager, next, jumper" :total="unReadData.total">
+                    </el-pagination>
+                </div>
 
-        <!-- 已读表格 -->
-        <tableLayout style="margin-top:16px" :layout="readData.tablecols" :data="readData.list" :custom="true">
-            <template v-slot:customcol="scope">
-                <div v-if="scope.column.columnname == 'region'">
-                    {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
+                <div class="title-box" style="margin-top:30px">
+                    <div class="title">已浏览{{ type == 'agency' ? '经销商' : '业务员' }}</div>
+                    <exportExcel :tablecols="readData.tablecols" :param="readData.params"
+                        :excelTitle="type == 'agency' ? '推广素材经销商已浏览表' : '推广素材团队已浏览表'" />
                 </div>
-                <div v-else-if="scope.column.columnname == 'isdownloadfile'">
-                    {{ scope.column.data.isdownloadfile == 1 ? '是' : '否' }}
+                <!-- 已读表格 -->
+                <tableLayout style="margin-top:16px" :layout="readData.tablecols" :data="readData.list" :custom="true">
+                    <template v-slot:customcol="scope">
+                        <div v-if="scope.column.columnname == 'region'">
+                            {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
+                        </div>
+                        <div v-else-if="scope.column.columnname == 'isdownloadfile'">
+                            {{ scope.column.data.isdownloadfile == 1 ? '是' : '否' }}
+                        </div>
+                        <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
+                    </template>
+                </tableLayout>
+                <div style="margin-top:16px;text-align:right">
+                    <el-pagination background small @current-change="handlReadCurrentChange"
+                        :current-page="readData.pageNumber" :page-size="readData.pageSize"
+                        layout="total, prev, pager, next, jumper" :total="readData.total">
+                    </el-pagination>
                 </div>
-                <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
-            </template>
-        </tableLayout>
-        <div style="margin-top:16px;text-align:right">
-            <el-pagination background small @current-change="handlReadCurrentChange" :current-page="readData.pageNumber"
-                :page-size="readData.pageSize" layout="total, prev, pager, next, jumper" :total="readData.total">
-            </el-pagination>
+            </div>
         </div>
     </div>
 </template>
@@ -139,6 +145,7 @@ export default {
                 angleField: 'value',
                 colorField: 'type',
                 radius: 0.75,
+                color: ['#FBB33B','#F77655'],
                 legend: {
                     position: 'leftTop'
                 },
@@ -182,12 +189,4 @@ export default {
 
 <style scoped>
 @import url('./public.css');
-
-.chart-box {
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    width: 100%;
-    margin-top: 40px;
-}
 </style>

src/HManagement/archives_ad/dataAnalysis/modules/public.css

@@ -16,6 +16,19 @@ header {
     margin-bottom: 10px;
 }
 
+.main {
+    display: flex;
+}
+
+
+.chart-box {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    width: 40%;
+    margin-top: 40px;
+}
+
 .title-box {
     display: flex;
     justify-content: space-between;