1

src/components/page/Dashboard.vue

@@ -42,7 +42,7 @@
                                             :data="driverRanking.logistics_truck_driver_ranking" class="seamless-warp"
                                             style="height:800px;" :class-option="{
                                                 step: 2, // 数值越大速度滚动越快
-                                                limitMoveNum: driverRanking.logistics_truck_driver_ranking.length, // 开始无缝滚动的数据量 this.dataList.length
+                                                limitMoveNum: 15, // 开始无缝滚动的数据量 this.dataList.length
                                                 hoverStop: true, // 是否开启鼠标悬停stop
                                                 direction: 1, // 0向下 1向上 2向左 3向右
                                                 openWatch: true, // 开启数据实时监控刷新dom
@@ -53,7 +53,7 @@
                                             <div class="tr flex"
                                                 v-for="(item, i) in driverRanking.logistics_truck_driver_ranking">
                                                 <div class="td" style="width: 20%;padding-left: 10px;">{{ item.ranking
-                                                }}
+                                                    }}
                                                 </div>
                                                 <div class="td" style="width: 36%">{{ item.task_no }}</div>
                                                 <div class="td" style="width: 24%">{{ item.license_plate }}
@@ -76,7 +76,7 @@
                                             }">
                                             <div class="tr flex" v-for="(item, i) in driverRanking.driver_ranking">
                                                 <div class="td" style="width: 20%;padding-left: 10px;">{{ item.ranking
-                                                    }}
+                                                }}
                                                 </div>
                                                 <div class="td" style="width: 36%">{{ item.task_no }}</div>
                                                 <div class="td" style="width: 24%">{{ item.license_plate }}
@@ -113,7 +113,7 @@
                                     <Charts :eOption="bing" v-if="bing" style="height:250px" />
                                 </div>
                                 <div class="leftdivitemchild">
-                                    <Charts :eOption="bar" v-if="bar" style="height: 250px" />
+                                    <Charts :eOption="bar" v-if="bar" style="height: 250px;margin-top: 30px;" />
                                 </div>
                             </div>
                             <div class="leftdivitem " style="padding: 14px 30px;">
@@ -131,7 +131,8 @@
                             <div class="topChart flex">
                                 <div class="toptitle">今日概况</div>
                                 <div class="num_item" v-for="(item, i) in topChartList" :key="i">
-                                    <div class="num_title">{{ item.title }}</div>
+                                    <div class="num_title"> <img src="../../assets/newimg/s.png" alt=""> {{ item.title
+                                        }}</div>
                                     <div class="num_value">
                                         <div v-for="(obj, j) in item.value" :key="j" class="num fontFx">{{ obj }}</div>
                                         <div class="weight">{{ item.unit }}</div>
@@ -167,7 +168,7 @@
                                         <div>
                                             <p>{{ current2 == 1 ? statistics.month.material_ton :
                                                 statistics.year.material_ton
-                                                }}</p>
+                                            }}</p>
                                             <p>{{ current2 == 1 ? '月' : '年' }}出货量/吨</p>
                                         </div>
                                     </div>
@@ -175,7 +176,7 @@
                                         <div>
                                             <p>{{ current2 == 1 ? statistics.month.order_count :
                                                 statistics.year.order_count
-                                                }}</p>
+                                            }}</p>
                                             <p>{{ current2 == 1 ? '月' : '年' }}派单量/单</p>
                                         </div>
                                         <div>
@@ -223,7 +224,7 @@
                                         </div>
                                         <div class="tbody">
                                             <vue-seamless-scroll :data="abnormal" class="seamless-warp"
-                                                style="height: 110px;" :class-option="{
+                                                style="height: 370px;" :class-option="{
                                                     step: 2, // 数值越大速度滚动越快
                                                     limitMoveNum: abnormal.length, // 开始无缝滚动的数据量 this.dataList.length
                                                     hoverStop: true, // 是否开启鼠标悬停stop
@@ -246,17 +247,23 @@
                                         </div>
                                     </div>
                                 </div>
+
+                            </div>
+                        </div>
+                        <div class="right">
+                            <div class="right_content">
+
                                 <div class="rightcontent2">
                                     <div class="title2">过磅记录数据库</div>
-                                    <div class="list" style="overflow: hidden;">
+                                    <div class="list" style="overflow: hidden;margin-top: 17px;">
                                         <vue-seamless-scroll :data="overweightRecord" class="seamless-warp"
-                                            style="height: 150px;" :class-option="{
+                                            style="height: 820px;" :class-option="{
                                                 step: 2, // 数值越大速度滚动越快
                                                 limitMoveNum: overweightRecord.length, // 开始无缝滚动的数据量 this.dataList.length
                                                 hoverStop: true, // 是否开启鼠标悬停stop
                                                 direction: 1, // 0向下 1向上 2向左 3向右
                                                 openWatch: true, // 开启数据实时监控刷新dom
-                                                singleHeight: 104, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+                                                singleHeight: 110, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                                                 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                                                 waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                                             }">
@@ -452,8 +459,11 @@ export default {
             }, 2 * 60 * 1000)
         },
         getApi2() {
+
             //地磅数据统计
             POST(`${this.$config.api}/large_screen/getTodayCompanyWbStatistics`).then(res => {
+                console.log(res);
+
                 this.topChartList = [
                     { title: '总入场车次/辆', value: this.numberSplit(res.data.total_arrival_vehicle_count) },
                     { title: '总出场车次/辆', value: this.numberSplit(res.data.total_departure_vehicle_count) },
@@ -461,9 +471,11 @@ export default {
                     { title: '当前场内车辆/辆', value: this.numberSplit(res.data.current_field_vehicle_count) },
                     { title: '异常过磅/辆', value: this.numberSplit(res.data.exception_overweight_vehicle_count) },
                 ]
+
                 pie.title[1].text = `${res.data.congestion_rate}%`
                 pie.series[0].data = [res.data.congestion_rate]
                 this.pie = pie
+
                 pie2.title[1].text = `${res.data.exception_rate}%`
                 pie2.series[0].data = [res.data.exception_rate]
                 this.pie2 = pie2
@@ -539,9 +551,9 @@ export default {
             })
         },
         numberSplit(num) {
-            const targetLength = 5; // 目标数组长度
-            const digits = Array.from(String(num), Number); // [1, 2, 3]
-            const zerosToAdd = targetLength - digits.length; // 需要补的 0 的数量
+            const targetLength = 6; // 目标数组长度
+            const digits = Array.from(String(num.toFixed(0)), Number); // [1, 2, 3]
+            const zerosToAdd =(targetLength > digits.length)? targetLength - digits.length : digits.length; // 需要补的 0 的数量
             const result = Array(zerosToAdd).fill(0).concat(digits);
             return result
         },
@@ -700,10 +712,11 @@ export default {
         left: 0;
         height: calc(100% - 20px);
         z-index: 1;
-        width: calc(100% - 40px);
+        width: calc(100% - 120px);
         background: url(../../assets/newimg/waikuang.png) no-repeat;
         background-size: 100% 100%;
-        margin: 0 20px;
+        margin: 0 60px;
+        box-sizing: border-box;
 
         .title1 {
             width: 220px;
@@ -795,7 +808,8 @@ export default {
 
         .contain {
             margin-top: 122px;
-            padding: 0 20px;
+            padding: 0 34px;
+            box-sizing: border-box;
 
             .content_title {
                 font-size: 14px;
@@ -937,7 +951,7 @@ export default {
 
                 .midMap {
                     width: 1546px;
-                    height: 1000px;
+                    flex: 1;
                     background: url(../../assets/newimg/midbottom.png) no-repeat;
                     background-size: 100% 100%;
                     position: relative;
@@ -966,7 +980,7 @@ export default {
                     background-repeat: no-repeat;
                     background-size: 100% 100%;
                     height: 120px;
-                    padding: 0 18px;
+                    padding: 0 64px;
                     margin-bottom: 4px;
                     position: relative;
                     box-sizing: border-box;
@@ -985,12 +999,20 @@ export default {
                     }
 
                     .num_item {
+                        flex: 1;
+                        margin-top: 9px;
+
                         .num_title {
                             font-size: 14px;
                             font-weight: 500;
                             color: #ffffff;
                             line-height: 18px;
                             text-align: center;
+
+                            img {
+                                position: relative;
+                                top: 5px;
+                            }
                         }
 
                         .num_value {
@@ -1090,20 +1112,24 @@ export default {
                     }
 
                     .right {
-                        width: 464px;
+                        width: 601px;
+                        height: 925px;
+                        padding: 28px 45px;
+                        background: url(../../assets/newimg/right2.png) no-repeat;
+                        background-size: 100% 100%;
+                        box-sizing: border-box;
+                        margin-left: 20px;
 
                         .rightcontent2 {
-                            width: 464px;
-                            height: 209px;
+
                             box-sizing: border-box;
-                            background: url(../../assets/newimg/right2.png) no-repeat;
-                            background-size: 100% 100%;
+
                             box-sizing: border-box;
-                            padding: 14px 30px;
+
 
                             .list {
                                 .item {
-                                    width: 400px;
+                                    width: 601px;
                                     background: rgba(255, 255, 255, 0.1);
                                     padding: 10px;
                                     box-sizing: border-box;
@@ -1254,7 +1280,7 @@ export default {
 
                                 .a1 {
                                     top: 50px;
-                                    left: 50px;
+                                    left: 25px;
                                     text-align: center;
                                     position: absolute;
 
@@ -1278,7 +1304,7 @@ export default {
 
 
                                 height: 98px;
-                                width: 398px;
+                                width: 100%;
                                 background: url(../../assets/newimg/zhibiao2.png) no-repeat;
                                 background-size: 100%;
                                 display: flex;
@@ -1305,7 +1331,7 @@ export default {
                             .rightcontentitem1 {
                                 margin-top: 10px;
                                 height: 98px;
-                                width: 398px;
+                                width: 100%;
                                 background: url(../../assets/newimg/zhibiao1.png) no-repeat;
                                 background-size: 100%;
                                 display: flex;
@@ -1331,11 +1357,9 @@ export default {
 
                             .rightcontent1 {
                                 position: relative;
-                                width: 464px;
+                                width: 100%;
                                 height: 428px;
-                                padding: 14px 30px;
                                 box-sizing: border-box;
-                                background: url(../../assets/newimg/right1.png) no-repeat;
                                 background-size: 100% 100%;
                             }
 
@@ -1492,6 +1516,7 @@ export default {
     width: 601px !important;
     height: 925px !important;
     background: url('../../assets/newimg/newLeftBG.png') no-repeat !important;
-    background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    box-sizing: border-box !important;
 }
 </style>

src/components/page/data.js

@@ -4,10 +4,10 @@ export const pie = {
         {
             text: "场内拥堵率",
             x: "center",
-            top: "50%",
+            top: "52%",
             textStyle: {
                 color: "#FFFFFF",
-                fontSize: 14,
+                fontSize: 21,
                 fontFamily: 'MFLiHei',
             },
         },
@@ -16,7 +16,7 @@ export const pie = {
             x: "center",
             top: "28%",
             textStyle: {
-                fontSize: "20",
+                fontSize: "40",
                 color: "#FFFFFF",
                 fontFamily: "DINAlternate-Bold, DINAlternate",
                 foontWeight: "600",
@@ -83,10 +83,10 @@ export const pie2 = {
         {
             text: "场内异常率",
             x: "center",
-            top: "50%",
+            top: "52%",
             textStyle: {
                 color: "#FFFFFF",
-                fontSize: 14,
+                fontSize: 21,
                 fontFamily: 'MFLiHei',
             },
         },
@@ -95,7 +95,7 @@ export const pie2 = {
             x: "center",
             top: "25%",
             textStyle: {
-                fontSize: "20",
+                fontSize: "40",
                 color: "#FFFFFF",
                 fontFamily: "DINAlternate-Bold, DINAlternate",
                 foontWeight: "600",
@@ -299,6 +299,8 @@ export const barData = {
 }
 
 export function initBing(optionsData) {
+    let total = 0
+    optionsData.map(r=>total+=r.value)
     const series = getPie3D(optionsData, 0.8);
 
     series.push({
@@ -313,8 +315,10 @@ export function initBing(optionsData) {
                 fontSize: 12,
             },
         },
+        title:{
+            text:'x213'
+        },
         labelLine: {
-
             length: 60,
             length2: 60,
         },
@@ -334,13 +338,13 @@ export function initBing(optionsData) {
                 show: true,
             },
             data: xData,
-            bottom: '0%',
-            itemGap: 5,
-            itemWidth: 10,
-            itemHeight: 10,
+            bottom: '5%',
+            itemGap: 10,
+            itemWidth: 7,
+            itemHeight: 7,
             textStyle: {
                 color: '#fff',
-                fontSize: 10,
+                fontSize: 12,
             },
         },
         animation: true,
@@ -355,15 +359,16 @@ export function initBing(optionsData) {
             },
         },
         title: {
-            text: '',
+            text: `${total}辆`,
             x: 'center',
-            top: '5',
+            top: '20',
             textStyle: {
                 color: '#fff',
                 fontSize: 24,
             },
         },
         backgroundColor: 'rgba(0,0,0,0)',
+        color:['#3A93FF','#01FFFF','#47FD7F'],
         labelLine: {
             show: false,
             lineStyle: {
@@ -390,9 +395,9 @@ export function initBing(optionsData) {
         },
         grid3D: {
             show: false,
-            boxHeight: 0.1,
-            //top: '30%',
-            bottom: '20%',
+            boxHeight: 0.05,
+            top: '5%',
+            bottom: '15%',
 
             viewControl: {
                 autoRotate: true, // 自动旋转
@@ -692,15 +697,15 @@ export function initLine(yAxisData, data1, data2, data3) {
                 color: {
                     type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                     colorStops: [{
-                        offset: 0, color: 'rgba(254,84,21,0.6)' // 0% 处的颜色
+                        offset: 0, color: 'rgba(58, 147, 255, 1)' // 0% 处的颜色
                     }, {
-                        offset: 1, color: 'rgba(254,84,21,0)' // 100% 处的颜色
+                        offset: 1, color: 'rgba(58, 147, 255, 0)' // 100% 处的颜色
                     }],
                     global: false // 缺省为 false
                 },
             },
             lineStyle: {
-                color: 'rgb(254,84,21)',
+                color: 'rgba(58, 147, 255, 1)',
                 width: 2,
                 type: 'solid'
             },
@@ -713,7 +718,7 @@ export function initLine(yAxisData, data1, data2, data3) {
                         value: item,
                         symbol: 'circle',
                         symbolSize: 6,
-                        itemStyle: { color: 'rgb(254,84,21)', shadowColor: 'rgb(254,84,21)', shadowBlur: 10 }
+                        itemStyle: { color: 'rgba(58, 147, 255, 1)', shadowColor: 'rgba(58, 147, 255,0.6)', shadowBlur: 10 }
                     }
                 }
 
@@ -728,15 +733,15 @@ export function initLine(yAxisData, data1, data2, data3) {
                 color: {
                     type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                     colorStops: [{
-                        offset: 0, color: 'rgba(1,254,254,0.6)' // 0% 处的颜色
+                        offset: 0, color: 'rgba(67, 230, 150, 1)' // 0% 处的颜色
                     }, {
-                        offset: 1, color: 'rgba(1,254,254,0)' // 100% 处的颜色
+                        offset: 1, color: 'rgba(67, 230, 150, 0)' // 100% 处的颜色
                     }],
                     global: false // 缺省为 false
                 },
             },
             lineStyle: {
-                color: 'rgb(1,254,254)',
+                color: 'rgba(67, 230, 150, 1)',
                 width: 2,
                 type: 'solid'
             },
@@ -749,7 +754,7 @@ export function initLine(yAxisData, data1, data2, data3) {
                         value: item,
                         symbol: 'circle',
                         symbolSize: 6,
-                        itemStyle: { color: 'rgb(1,254,254)', shadowColor: 'rgba(255,255,255,0.6)', shadowBlur: 10 }
+                        itemStyle: { color: 'rgba(67, 230, 150, 1)', shadowColor: 'rgba(67, 230, 150, 0.6)', shadowBlur: 10 }
                     }
                 }
                 return item != '-' ? item : '-'
@@ -800,15 +805,15 @@ export function initLine(yAxisData, data1, data2, data3) {
                 color: {
                     type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                     colorStops: [{
-                        offset: 0, color: 'rgba(3,144,251,0.6)' // 0% 处的颜色
+                        offset: 0, color: 'rgba(247, 85, 21, 1)' // 0% 处的颜色
                     }, {
-                        offset: 1, color: 'rgba(3,144,251,0)' // 100% 处的颜色
+                        offset: 1, color: 'rgba(247, 85, 21, 0)' // 100% 处的颜色
                     }],
                     global: false // 缺省为 false
                 },
             },
             lineStyle: {
-                color: 'rgba(3,144,251,1)',
+                color: 'rgba(247, 85, 21, 1)',
                 width: 2,
                 type: 'solid'
             },
@@ -821,7 +826,7 @@ export function initLine(yAxisData, data1, data2, data3) {
                         value: item,
                         symbol: 'circle',
                         symbolSize: 4,
-                        itemStyle: { color: '#rgba(3,144,251,1)', shadowColor: 'rgba(255,255,255,0.6)', shadowBlur: 10 }
+                        itemStyle: { color: '#rgba(247, 85, 21, 1)', shadowColor: 'rgba(247, 85, 21, 0.6)', shadowBlur: 10 }
                     }
                 }
                 return item != '-' ? item : '-'