Demo

src/module/databoard/assets/index.css

@@ -62,7 +62,7 @@
   width: 25%;
   float: right;
   display: flex;
-  justify-content: flex-start;
+  justify-content: flex-end;
   align-items: center;
   white-space: nowrap;
 }

src/module/databoard/components/card/paging-list.vue

@@ -18,7 +18,6 @@
           </tbody>
         </table>
       </div>
-      <div class="list middle"></div>
       <div class="list">
         <table class="lw_table">
           <tbody>
@@ -94,6 +93,8 @@ export default {
 }
 
 .winner_list {
+  display: flex;
+  justify-content: space-around;
   text-align: center;
 }
 
@@ -117,7 +118,7 @@ tr:nth-child(even) {
 }
 
 td {
-  padding: 0 0 0 1rem;
+  padding: 0 0.5rem 0 0.5rem;
 }
 
 .col_number {
@@ -130,6 +131,7 @@ td {
 }
 
 .winner_span {
+  white-space: nowrap;
   color: white;
   font-size: 14px;
 }
@@ -142,17 +144,4 @@ td {
   font-weight: bold;
 }
 
-
-.list {
-  display: inline-grid;
-  width: 35%;
-}
-
-.middle {
-  width: 15%;
-}
-
-.bottom {
-
-}
 </style>

src/module/databoard/components/chart/ar-company-bar.vue

@@ -120,7 +120,7 @@ export default {
   },
   mounted() {
     // 获取图表数据
-    let data = [{"unregister_amount":2538.22,"settle_company":"上海******有限公司"},{"unregister_amount":270.32,"settle_company":"上海******有限公司"},{"unregister_amount":203.7,"settle_company":"南京******有限公司"},{"unregister_amount":100.37,"settle_company":"上海******有限公司"},{"unregister_amount":100.21,"settle_company":"北京******有限公司"},{"unregister_amount":92.46,"settle_company":"上海******有限公司"},{"unregister_amount":83.66,"settle_company":"上海******有限公司"},{"unregister_amount":69.86,"settle_company":"上海******有限公司"},{"unregister_amount":56.76,"settle_company":"上海******有限公司"},{"unregister_amount":55.45,"settle_company":"上海******有限公司"},{"unregister_amount":39.9,"settle_company":"郑州******有限公司"},{"unregister_amount":38.22,"settle_company":"上海******有限公司"},{"unregister_amount":37.34,"settle_company":"南京******有限公司"},{"unregister_amount":35.97,"settle_company":"浙江******有限公司"},{"unregister_amount":32.97,"settle_company":"上海******有限公司"},{"unregister_amount":24.29,"settle_company":"天津******有限公司"},{"unregister_amount":19.09,"settle_company":"南京******有限公司"},{"unregister_amount":17.01,"settle_company":"上海******有限公司"},{"unregister_amount":16.45,"settle_company":"长春******有限公司"},{"unregister_amount":14.98,"settle_company":"厦门******有限公司"}];
+    let data = [{"unregister_amount":2538.22,"settle_company":"上海**有限公司"},{"unregister_amount":270.32,"settle_company":"上海**有限公司"},{"unregister_amount":203.7,"settle_company":"南京**有限公司"},{"unregister_amount":100.37,"settle_company":"上海**有限公司"},{"unregister_amount":100.21,"settle_company":"北京**有限公司"},{"unregister_amount":92.46,"settle_company":"上海**有限公司"},{"unregister_amount":83.66,"settle_company":"上海**有限公司"},{"unregister_amount":69.86,"settle_company":"上海**有限公司"},{"unregister_amount":56.76,"settle_company":"上海**有限公司"},{"unregister_amount":55.45,"settle_company":"上海**有限公司"},{"unregister_amount":39.9,"settle_company":"郑州**有限公司"},{"unregister_amount":38.22,"settle_company":"上海**有限公司"},{"unregister_amount":37.34,"settle_company":"南京**有限公司"},{"unregister_amount":35.97,"settle_company":"浙江**有限公司"},{"unregister_amount":32.97,"settle_company":"上海**有限公司"},{"unregister_amount":24.29,"settle_company":"天津**有限公司"},{"unregister_amount":19.09,"settle_company":"南京**有限公司"},{"unregister_amount":17.01,"settle_company":"上海**有限公司"},{"unregister_amount":16.45,"settle_company":"长春**有限公司"},{"unregister_amount":14.98,"settle_company":"厦门**有限公司"}];
     let xAxisData = []
     let seriesData = []
     for (let item of data) {

src/module/databoard/components/chart/ar-monthly-company-bar.vue

@@ -112,7 +112,7 @@ export default {
     }
     this.barChart.title.text = month + " 已开票未收款（结算单位）"
     // 获取图表数据
-    let data = [{"unregister_amount":1293.17,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":87.72,"settle_month":"2023-10","settle_company":"北京******有限公司"},{"unregister_amount":60.23,"settle_month":"2023-10","settle_company":"南京******有限公司"},{"unregister_amount":47.17,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":35.76,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":24.83,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":24.1,"settle_month":"2023-10","settle_company":"天津******有限公司"},{"unregister_amount":22.38,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":17.01,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":16.02,"settle_month":"2023-10","settle_company":"浙江******有限公司"},{"unregister_amount":14.56,"settle_month":"2023-10","settle_company":"厦门******有限公司"},{"unregister_amount":13.8,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":12.44,"settle_month":"2023-10","settle_company":"郑州******有限公司"},{"unregister_amount":10.66,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":8.62,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":8.3,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":8.1,"settle_month":"2023-10","settle_company":"天津******有限公司"},{"unregister_amount":7.08,"settle_month":"2023-10","settle_company":"南京******有限公司"},{"unregister_amount":7.07,"settle_month":"2023-10","settle_company":"济南******有限公司"},{"unregister_amount":6.41,"settle_month":"2023-10","settle_company":"江苏******有限公司"}];
+    let data = [{"unregister_amount":1293.17,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":87.72,"settle_month":"2023-10","settle_company":"北京**有限公司"},{"unregister_amount":60.23,"settle_month":"2023-10","settle_company":"南京**有限公司"},{"unregister_amount":47.17,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":35.76,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":24.83,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":24.1,"settle_month":"2023-10","settle_company":"天津**有限公司"},{"unregister_amount":22.38,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":17.01,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":16.02,"settle_month":"2023-10","settle_company":"浙江**有限公司"},{"unregister_amount":14.56,"settle_month":"2023-10","settle_company":"厦门**有限公司"},{"unregister_amount":13.8,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":12.44,"settle_month":"2023-10","settle_company":"郑州**有限公司"},{"unregister_amount":10.66,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":8.62,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":8.3,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":8.1,"settle_month":"2023-10","settle_company":"天津**有限公司"},{"unregister_amount":7.08,"settle_month":"2023-10","settle_company":"南京**有限公司"},{"unregister_amount":7.07,"settle_month":"2023-10","settle_company":"济南**有限公司"},{"unregister_amount":6.41,"settle_month":"2023-10","settle_company":"江苏**有限公司"}];
     let xAxisData = []
     let seriesData = []
     for (let item of data) {

src/module/databoard/components/container/display-board.vue

@@ -2,7 +2,7 @@
   <div class="display_board">
     <!--角标组件-->
     <corner-mark-large v-if="$props.corner_size === 'large'"/>
-    <corner-mark-small v-else/>
+    <corner-mark-small v-else-if="$props.corner_size === 'small'"/>
     <!--标题组件-->
     <board-title-large v-if="$props.title && $props.title_size === 'large'">{{ $props.title }}</board-title-large>
     <board-title-small v-else-if="$props.title">{{ $props.title }}</board-title-small>
@@ -59,7 +59,7 @@ export default {
 .display_board {
   position: relative;
   box-sizing: border-box;
-  border-radius: 1.5rem;
+  border-radius: 1rem;
   border: 0.2rem solid var(--container-border-color);
   background-color: var(--container-background-color);
   box-shadow: 0 0 3rem  var(--container-shadow-color) inset;
@@ -69,7 +69,7 @@ export default {
   position: absolute;
   height: 100%;
   width: 100%;
-  padding: 1rem;
+  padding: 0.5rem;
 }
 
 </style>

src/module/databoard/components/container/showcase.vue

@@ -45,7 +45,7 @@ export default {
 }
 
 .show_content {
-  height: 40%;
+  height: 50%;
   width: 100%;
   color: var(--lightblue-text-color);
 }
@@ -74,7 +74,6 @@ export default {
 
 .showcase_title {
   position: absolute;
-  height: 0;
   color: var(--white-text-color);
   font-size: 12px;
   font-family: 黑体, serif;

src/module/databoard/components/layout/title-content-mark.vue

@@ -74,7 +74,7 @@ export default {
 
 .bd{
   height: 100%;
-  padding: 0 0 2% 0%;
+  padding: 0 0 2% 0;
 }
 
 .center-bd{
@@ -100,8 +100,8 @@ export default {
   display: flex;
   align-items: center;
   position: relative;
-  font-size: 30px;
-  text-align: center;
+  font-size: 20px;
+  //text-align: center;
   height: calc(100% - var(--titleHeight));
   width: 100%;
 }

src/module/databoard/components/table/table-column.vue

 <template>
   <table>
     <thead v-if="showHead">
-    <tr><th :style="eval('title',title)">{{titleFormatter?titleFormatter(title):title}}&nbsp;</th></tr>
+    <tr><th :style="eval('title',title)">{{titleFormatter?titleFormatter(title):title}}</th></tr>
     </thead>
     <tbody>
     <tr v-for="row in data"><td :style="eval('cell',(row[name]?row[name]:''))">{{valueFormatter?valueFormatter(row[name]?row[name]:''):row[name]?row[name]:''}}</td></tr>
@@ -92,6 +92,8 @@ table,th,td,tr,thead{
 tr{
   width: 100%;
 }
-
+th, td{
+  text-align: right;
+}
 
 </style>

src/module/databoard/databoard/js/indexPieData.js

@@ -17,7 +17,7 @@ export const getTransportTypeOrderFinishPie = async (callback,date) => {
 }
 export const getCustomerOrderFinishPie = async (callback,date) => {
   let resList = new Array();
-  let data = {"上海******有限公司1":{"cur_gross_profit_amount":1381.535,"cur_sell_settle_amount":48353.725,"entrust_agency_name":"上海******有限公司1","cur_buy_settle_amount":46972.19,"cur_unit_weight":1381.535},"上海******有限公司2":{"cur_gross_profit_amount":735.775,"cur_sell_settle_amount":0,"entrust_agency_name":"上海******有限公司2","cur_buy_settle_amount":735.775,"cur_unit_weight":1201.59},"浙江******有限公司":{"cur_gross_profit_amount":1237.95,"cur_sell_settle_amount":1237.95,"entrust_agency_name":"浙江******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":160.506},"上海******有限公司3":{"cur_gross_profit_amount":460.7568,"cur_sell_settle_amount":1330.8498,"entrust_agency_name":"上海******有限公司3","cur_buy_settle_amount":870.093,"cur_unit_weight":135.801},"天津******有限公司":{"cur_gross_profit_amount":938.212,"cur_sell_settle_amount":0,"entrust_agency_name":"天津******有限公司","cur_buy_settle_amount":938.212,"cur_unit_weight":520.244},"南京******有限公司":{"cur_gross_profit_amount":359.415,"cur_sell_settle_amount":1096.245,"entrust_agency_name":"南京******有限公司","cur_buy_settle_amount":736.83,"cur_unit_weight":730.083},"北京******有限公司":{"cur_gross_profit_amount":2318.555,"cur_sell_settle_amount":2318.555,"entrust_agency_name":"北京******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":440.45},"广州******有限公司":{"cur_gross_profit_amount":4211.0898,"cur_sell_settle_amount":4211.0898,"entrust_agency_name":"广州******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":460.486},"青岛******有限公司":{"cur_gross_profit_amount":2502.201,"cur_sell_settle_amount":2502.201,"entrust_agency_name":"青岛******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":300.147}};
+  let data = {"上海**有限公司1":{"cur_gross_profit_amount":1381.535,"cur_sell_settle_amount":48353.725,"entrust_agency_name":"上海**有限公司1","cur_buy_settle_amount":46972.19,"cur_unit_weight":1381.535},"上海**有限公司2":{"cur_gross_profit_amount":735.775,"cur_sell_settle_amount":0,"entrust_agency_name":"上海**有限公司2","cur_buy_settle_amount":735.775,"cur_unit_weight":1201.59},"浙江**有限公司":{"cur_gross_profit_amount":1237.95,"cur_sell_settle_amount":1237.95,"entrust_agency_name":"浙江**有限公司","cur_buy_settle_amount":0,"cur_unit_weight":160.506},"上海**有限公司3":{"cur_gross_profit_amount":460.7568,"cur_sell_settle_amount":1330.8498,"entrust_agency_name":"上海**有限公司3","cur_buy_settle_amount":870.093,"cur_unit_weight":135.801},"天津**有限公司":{"cur_gross_profit_amount":938.212,"cur_sell_settle_amount":0,"entrust_agency_name":"天津**有限公司","cur_buy_settle_amount":938.212,"cur_unit_weight":520.244},"南京**有限公司":{"cur_gross_profit_amount":359.415,"cur_sell_settle_amount":1096.245,"entrust_agency_name":"南京**有限公司","cur_buy_settle_amount":736.83,"cur_unit_weight":730.083},"北京**有限公司":{"cur_gross_profit_amount":2318.555,"cur_sell_settle_amount":2318.555,"entrust_agency_name":"北京**有限公司","cur_buy_settle_amount":0,"cur_unit_weight":440.45},"广州**有限公司":{"cur_gross_profit_amount":4211.0898,"cur_sell_settle_amount":4211.0898,"entrust_agency_name":"广州**有限公司","cur_buy_settle_amount":0,"cur_unit_weight":460.486},"青岛**有限公司":{"cur_gross_profit_amount":2502.201,"cur_sell_settle_amount":2502.201,"entrust_agency_name":"青岛**有限公司","cur_buy_settle_amount":0,"cur_unit_weight":300.147}};
   for (let key in data) {
     resList.push({name: key, value: data[key].cur_unit_weight});
   }

src/module/databoard/databoard/order-proportion.vue

@@ -13,10 +13,10 @@
     </div>
     <div class="card-board" v-if="currentBtn.subdivide === '01'">
       <contrast-card :mouseHand="true" v-for="data in currentHeadData" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.key}" @click.native="selectCard(data)">
-        <title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px" :title-style="{'font-weight': 'bold'}" :mark-style="{'bottom': '12%'}" :title="data.title" :content="data.amount" mark="万吨" isBold/>
-        <div style="width: 60%; height: 100%; float:left; padding: 2% 2% 0 8%; line-height: 40px; display: flex; align-items: center;font-size: 16px;">
-          <table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
-          <table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
+        <title-content-mark style="color: #369afa;float: left;width: 35%;font-size: 18px" :title-style="{'font-weight': 'bold'}" :mark-style="{'bottom': '12%'}" :title="data.title" :content="data.amount" mark="万吨" isBold/>
+        <div style="width: 65%; height: 100%; float:left; display: flex; align-items: center;font-size: 16px; white-space: nowrap;">
+          <table-column style="float: left;width: 30%;" :data="data.hb" name="title"/>
+          <table-column style="float: left;width: 35%;" :data="data.hb" name="amount"/>
           <table-column style="float: left;width: 35%;" :data="data.hb" name="rate" cell-style-js="var res = {color: 'rgb(51, 255, 102)'}; if(data.indexOf('+') !== -1){res.color = 'rgb(255, 51, 0)'} res;"/>
         </div>
       </contrast-card>
@@ -24,21 +24,21 @@
     <div class="card-board" v-if="currentBtn.subdivide !== '01'">
       <contrast-card :mouseHand="true" v-for="data in currentHeadData" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.key}" @click.native="selectCard(data)" :style="listCardStyle">
 <!--        标题-->
-        <div style="width: 100%; height: 20%; float:left; padding: 2%; line-height: 28px; display: flex; align-items: center; font-size: 14px;">
+        <div style="width: 100%; height: 20%; float:left; display: flex; align-items: center; font-size: 14px;">
           <table-column style="float: left;width: 80%;" :data="[]" name="title" :title="data.title" :title-formatter="value=> value+'(万吨/万元)'" show-head :title-style="{'font-size': '18px','padding-left':'3%','white-space': 'nowrap','font-weight': 'bold',}"/>
-          <table-column style="float: left;width: 0;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="[]" name="today"/>
+          <table-column style="float: left;width: 0;font-weight: bold;color: #5eeef4;text-align: center;" :data="[]" name="today"/>
           <table-column style="float: left;width: 20%;" :data="[]" name="yesterday" :title="dateTimeChoice[currentBtn.date]" show-head/>
         </div>
-        <div style="width: 100%; height: 80%; float:left; padding: 2%;margin-top: 1%; line-height: 28px; display: flex; align-items: center; font-size: 14px;">
+        <div style="width: 100%; height: 80%; float:left; margin-top: 1%; display: flex; align-items: center; font-size: 14px;">
           <table-column style="float: left;width: 30%;" :data="data.data" name="title"/>
-          <table-column style="float: left;width: 50%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="data.data" name="today" :value-formatter="converAmont"/>
+          <table-column style="float: left;width: 50%;font-weight: bold;color: #5eeef4;text-align: center;" :data="data.data" name="today" :value-formatter="converAmont"/>
           <table-column style="float: left;width: 20%;" :data="data.data" name="yesterday" :value-formatter="converAmont"/>
         </div>
       </contrast-card>
     </div>
     <div class="chart">
       <display-board class="trade_left" title="订单量占比" title_size="large">
-        <winners-list style="height: 96%;overflow: auto;" id="ar_company_list" :rows="currentDetailData" :show-icon="false" :columns-style="{'title':{'width':'50%'},'订单量（万吨）':{'width':'30%'}}" :col-formatter="{'1':(v)=>v+'%'}"/>
+        <winners-list style="height: 96%;overflow: auto;" id="ar_company_list" :rows="currentDetailData" :show-icon="false" :columns-style="{'title':{'width':'45%'},'订单量(万吨)':{'width':'35%'}}" :col-formatter="{'1':(v)=>v+'%'}"/>
       </display-board>
       <line-bar-chart ref="chart" style="width: 75%;height: 100%;" :data="currentDetailData" x="company" y="value" :title="chartTitle" :formatter="formatter" :line-formatter="lineFormatter" bar-formatter="{@value}万吨"/>
     </div>
@@ -149,7 +149,7 @@ export default {
 }
 .card-board{
   width: 100%;
-  height: 25%;
+  height: 28%;
   display: flex;
   justify-content: space-between;
   padding: 2rem;

src/module/databoard/index_back1.vue

@@ -298,15 +298,15 @@ export default {
         },
         sr:[
           {
-            title:'累计营业收入（当年）',
+            title:'累计营业收入(当年)',
             value:'20,303',
           },
           {
-            title:'应收款（财务）',
+            title:'应收款(财务)',
             value:'20,303',
           },
           {
-            title:'应收款（营销）',
+            title:'应收款(营销)',
             value:'20,303',
           },
         ],

src/module/index/index.html

@@ -20,11 +20,6 @@
       padding: 0;
     }
 
-    body{
-      min-height: 900px;
-      min-width: 1440px;
-    }
-
     body, html {
       margin: 0;
       padding: 0;

src/module/index/index.vue

@@ -3,12 +3,12 @@
     <div class="head">
       <div class="text_left">
         <input class="btn" type="button" value="返回上级" v-if="$route.fullPath !== '/index'" @click="goIndex">
-        <span>{{ currentDate }}</span>
-        <span>{{ currentTime }}</span>
-        <span>{{ currentWeek }}</span>
+        <span>刷新时间：{{ countDown }}s</span>
       </div>
       <div class="text_right">
-        <span>刷新时间：{{ countDown }}s</span>
+        <span>{{ currentDate }}</span>
+        <span>{{ currentTime }}</span>
+        <span style="padding-right: 1rem">{{ currentWeek }}</span>
       </div>
       <div id="top_title"></div>
     </div>
@@ -26,7 +26,7 @@ export default {
   name: 'app',
   data() {
     return {
-      countDown: 10,
+      countDown: 9,
       currentDate: null,
       currentTime: null,
       currentWeek: null,
@@ -57,7 +57,7 @@ export default {
     this.countDownTimer = setInterval(() => {
       this.countDown--
       if (this.countDown <= 0) {
-        this.countDown = 10;
+        this.countDown = 9;
       }
       this.setCurrentDateTime();
     }, 1000)
@@ -84,16 +84,15 @@ export default {
 }
 .btn{
   height: 70%;
-  margin: 0.5%;
+  margin: auto;
   border: none;
   font-size: 12px;
   font-weight: bold;
   border-radius: 25px;
-  padding: 0 10px;
+  padding: 0 20px;
   line-height: 100%;
   color: #00c8d6;
   background-color: #1234a1;
-  margin: auto;
 }
 .btn:hover{
   color: #1234a1 !important;