1

src/App.vue

@@ -27,12 +27,12 @@ export default {
     mounted() {
         const screenWidth = window.innerWidth;
         let bodyStyle = document.body.style;
-        bodyStyle.transform = `scale(${screenWidth / 1920})`;
+        bodyStyle.transform = `scale(${screenWidth / 4224})`;
 
         window.addEventListener('resize', () => {
             const screenWidth = window.innerWidth;
             let bodyStyle = document.body.style;
-            bodyStyle.transform = `scale(${screenWidth / 1920})`;
+            bodyStyle.transform = `scale(${screenWidth / 4224})`;
         });
 
         // let bodyStyle = document.body.style
@@ -64,8 +64,8 @@ export default {
 }
 
 body {
-    width: 1920px;
-    height: 1080px;
+    width: 4224px;
+    height: 1152px;
     position: fixed;
     left: 0;
     top: 0;

src/components/page/Dashboard.vue

@@ -23,36 +23,7 @@
                 <div class="mid_charts">
                     <div class="botChart">
                         <div class="left_charts">
-                            <div class="leftdivitem leftdivitem1">
-                                <div class="leftdivitemchild">
-                                    <div class="title2">场内拥堵率</div>
-                                    <div class="pie pie1">
-                                        <Charts :eOption="pie" v-if="pie" style="height: 138px" />
-                                    </div>
-                                </div>
-                                <div class="leftdivitemchild">
-                                    <div class="title2">场内异常率</div>
-                                    <div class="pie pie2">
-                                        <Charts :eOption="pie2" v-if="pie2" style="height: 138px" />
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="leftdivitem leftdivitem1">
-                                <div class="leftdivitemchild">
-                                    <div class="title2">潜在接单司机</div>
-                                    <Charts :eOption="bing" v-if="bing" style="height: 138px" />
-                                </div>
-                                <div class="leftdivitemchild">
-                                    <Charts :eOption="bar" v-if="bar" style="height: 180px" />
-                                </div>
-                            </div>
-                            <div class="leftdivitem " style="padding: 14px 30px;">
-                                <div class="title2">近30天出货量</div>
-                                <div>
-                                    <Charts :eOption="line" v-if="line" style="height: 150px"></Charts>
-                                </div>
-                            </div>
-                            <div class="leftdivitem" style="padding: 14px 30px;">
+                            <div class="leftdivitem newLeftdivitem" style="padding: 23px 26px;">
                                 <div class="btnGroup">
                                     <div :class="current1 == 1 ? 'btn1' : 'btn2'" @click="current1 = 1">物流</div>
                                     <div :class="current1 == 2 ? 'btn1' : 'btn2'" style="position:relative;left:-6px"
@@ -69,20 +40,20 @@
                                     <div class="tbody">
                                         <vue-seamless-scroll v-if="current1 == 1"
                                             :data="driverRanking.logistics_truck_driver_ranking" class="seamless-warp"
-                                            style="height: 110px;" :class-option="{
+                                            style="height:800px;" :class-option="{
                                                 step: 2, // 数值越大速度滚动越快
                                                 limitMoveNum: driverRanking.logistics_truck_driver_ranking.length, // 开始无缝滚动的数据量 this.dataList.length
                                                 hoverStop: true, // 是否开启鼠标悬停stop
                                                 direction: 1, // 0向下 1向上 2向左 3向右
                                                 openWatch: true, // 开启数据实时监控刷新dom
-                                                singleHeight: 30, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+                                                singleHeight: 32, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                                                 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                                                 waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                                             }">
                                             <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 }}
@@ -93,7 +64,7 @@
                                             </div>
                                         </vue-seamless-scroll>
                                         <vue-seamless-scroll v-if="current1 == 2" :data="driverRanking.driver_ranking"
-                                            class="seamless-warp" style="height: 110px;" :class-option="{
+                                            class="seamless-warp" style="height: 800px;" :class-option="{
                                                 step: 2, // 数值越大速度滚动越快
                                                 limitMoveNum: driverRanking.driver_ranking.length, // 开始无缝滚动的数据量 this.dataList.length
                                                 hoverStop: true, // 是否开启鼠标悬停stop
@@ -104,7 +75,8 @@
                                                 waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                                             }">
                                             <div class="tr flex" v-for="(item, i) in driverRanking.driver_ranking">
-                                                <div class="td" style="width: 20%;padding-left: 10px;">{{ item.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 }}
@@ -120,6 +92,40 @@
 
                         </div>
 
+                        <div class="left_charts newLeftdivitem" style="margin-left: 20px;">
+                            <div class="leftdivitem leftdivitem1">
+                                <div class="leftdivitemchild">
+                                    <div class="title2">场内拥堵率</div>
+                                    <div class="pie pie1">
+                                        <Charts :eOption="pie" v-if="pie" style="height: 207px" />
+                                    </div>
+                                </div>
+                                <div class="leftdivitemchild">
+                                    <div class="title2">场内异常率</div>
+                                    <div class="pie pie2">
+                                        <Charts :eOption="pie2" v-if="pie2" style="height: 207px" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="leftdivitem leftdivitem1" style="">
+                                <div class="leftdivitemchild">
+                                    <div class="title2">潜在接单司机</div>
+                                    <Charts :eOption="bing" v-if="bing" style="height:250px" />
+                                </div>
+                                <div class="leftdivitemchild">
+                                    <Charts :eOption="bar" v-if="bar" style="height: 250px" />
+                                </div>
+                            </div>
+                            <div class="leftdivitem " style="padding: 14px 30px;">
+                                <div class="title2">近30天出货量</div>
+                                <div>
+                                    <Charts :eOption="line" v-if="line" style="height: 250px"></Charts>
+                                </div>
+                            </div>
+
+
+                        </div>
+
 
                         <div class="mid">
                             <div class="topChart flex">
@@ -135,7 +141,8 @@
                             <div class="midMap">
                                 <div class="toptitle">矿区地图</div>
                                 <div style="height: 100%;border-radius:20px;overflow: hidden;">
-                                    <amap :zoom="6" :marker="Weighbridge" :center="center" @map-loaded="onMapLoaded"></amap>
+                                    <amap :zoom="6" :marker="Weighbridge" :center="center" @map-loaded="onMapLoaded">
+                                    </amap>
                                 </div>
                             </div>
                             <!-- <div class="middibu"></div> -->
@@ -160,7 +167,7 @@
                                         <div>
                                             <p>{{ current2 == 1 ? statistics.month.material_ton :
                                                 statistics.year.material_ton
-                                            }}</p>
+                                                }}</p>
                                             <p>{{ current2 == 1 ? '月' : '年' }}出货量/吨</p>
                                         </div>
                                     </div>
@@ -168,7 +175,7 @@
                                         <div>
                                             <p>{{ current2 == 1 ? statistics.month.order_count :
                                                 statistics.year.order_count
-                                            }}</p>
+                                                }}</p>
                                             <p>{{ current2 == 1 ? '月' : '年' }}派单量/单</p>
                                         </div>
                                         <div>
@@ -440,64 +447,64 @@ export default {
         cycleGetApi() {
             clearInterval(this.timer)
             this.timer = setInterval(() => {
-                
+
                 this.getApi2()
             }, 2 * 60 * 1000)
         },
-        getApi2(){
+        getApi2() {
             //地磅数据统计
             POST(`${this.$config.api}/large_screen/getTodayCompanyWbStatistics`).then(res => {
-                    this.topChartList = [
-                        { title: '总入场车次/辆', value: this.numberSplit(res.data.total_arrival_vehicle_count) },
-                        { title: '总出场车次/辆', value: this.numberSplit(res.data.total_departure_vehicle_count) },
-                        { title: '当前总出货量/吨', value: this.numberSplit(res.data.total_departure_material_ton) },
-                        { 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
-                })
-                //今日订单概况总量、完成率、车次
-                POST(`${this.$config.api}/large_screen/getTodayMonthOrderOverview`).then(res => {
-                    this.overview = res.data
-                })
-                //地磅信息
-                POST(`${this.$config.api}/large_screen/getWeighbridgeInfo`).then(res => {
-                    this.Weighbridge = res.data.map(r => {
-                        return {
-                            "truckNo": r.name,
-                            "businessStatus": 1,
-                            "runStatus": 2,
-                            "lat": "112.32956",
-                            "lng": "34.651725",
-                            "detailAddress": null,
-                            "speed": 0.0,
-                            "gpsTime": "2024-04-17 14:31:09",
-                            lnglat: [r.lng, r.lat]
-                        }
-                    })
-                })
-                //近30天出货量
-                POST(`${this.$config.api}/large_screen/getOutboundMaterialTon`).then(res => {
-                    this.line = initLine(res.data[0].data.map(r => r.time), res.data[0].data.map(r => r.shipment), res.data[1].data.map(r => r.shipment), res.data[2].data.map(r => r.shipment))
-                })
-                //过磅记录
-                POST(`${this.$config.api}/large_screen/getOverweightRecord`).then(res => {
-                    this.overweightRecord = res.data
-                })
-                //异常过磅车辆
-                POST(`${this.$config.api}/large_screen/getExceptionOverweightVehicle`).then(res => {
-                    this.abnormal = res.data
+                this.topChartList = [
+                    { title: '总入场车次/辆', value: this.numberSplit(res.data.total_arrival_vehicle_count) },
+                    { title: '总出场车次/辆', value: this.numberSplit(res.data.total_departure_vehicle_count) },
+                    { title: '当前总出货量/吨', value: this.numberSplit(res.data.total_departure_material_ton) },
+                    { 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
+            })
+            //今日订单概况总量、完成率、车次
+            POST(`${this.$config.api}/large_screen/getTodayMonthOrderOverview`).then(res => {
+                this.overview = res.data
+            })
+            //地磅信息
+            POST(`${this.$config.api}/large_screen/getWeighbridgeInfo`).then(res => {
+                this.Weighbridge = res.data.map(r => {
+                    return {
+                        "truckNo": r.name,
+                        "businessStatus": 1,
+                        "runStatus": 2,
+                        "lat": "112.32956",
+                        "lng": "34.651725",
+                        "detailAddress": null,
+                        "speed": 0.0,
+                        "gpsTime": "2024-04-17 14:31:09",
+                        lnglat: [r.lng, r.lat]
+                    }
                 })
+            })
+            //近30天出货量
+            POST(`${this.$config.api}/large_screen/getOutboundMaterialTon`).then(res => {
+                this.line = initLine(res.data[0].data.map(r => r.time), res.data[0].data.map(r => r.shipment), res.data[1].data.map(r => r.shipment), res.data[2].data.map(r => r.shipment))
+            })
+            //过磅记录
+            POST(`${this.$config.api}/large_screen/getOverweightRecord`).then(res => {
+                this.overweightRecord = res.data
+            })
+            //异常过磅车辆
+            POST(`${this.$config.api}/large_screen/getExceptionOverweightVehicle`).then(res => {
+                this.abnormal = res.data
+            })
 
-                //物流铲车司机排行榜
-                POST(`${this.$config.api}/large_screen/getDriverRanking`).then(res => {
-                    this.driverRanking = res.data
-                })
+            //物流铲车司机排行榜
+            POST(`${this.$config.api}/large_screen/getDriverRanking`).then(res => {
+                this.driverRanking = res.data
+            })
         },
         getApi() {
 
@@ -691,13 +698,12 @@ export default {
         position: absolute;
         top: 0;
         left: 0;
-        height: calc(100% - 102px);
+        height: calc(100% - 20px);
         z-index: 1;
         width: calc(100% - 40px);
         background: url(../../assets/newimg/waikuang.png) no-repeat;
         background-size: 100% 100%;
         margin: 0 20px;
-        margin-top: 20px;
 
         .title1 {
             width: 220px;
@@ -801,12 +807,11 @@ export default {
             }
 
             .left_charts {
-                width: 464px;
+                width: 601px;
 
                 .leftdivitem {
-                    width: 464px;
-                    height: 209px;
-                    background: url(../../assets/newimg/left.png) no-repeat;
+                    width: 601px;
+                    // background: url(../../assets/newimg/left.png) no-repeat;
                     background-size: 100% 100%;
                     margin-bottom: 4px;
                     box-sizing: border-box;
@@ -816,7 +821,7 @@ export default {
                 .btnGroup {
                     position: absolute;
                     right: 25px;
-                    top: 20px;
+                    top: 30px;
                     display: flex;
 
                     .btn1 {
@@ -854,15 +859,15 @@ export default {
 
                 .leftdivitem1 {
                     display: flex;
-                    padding: 14px 30px;
+                    padding: 23px 26px;
 
                     .leftdivitemchild {
                         width: 50%;
 
                         .pie {
                             margin: 0 auto;
-                            width: 138px;
-                            height: 138px;
+                            width: 207px;
+                            height: 207px;
                             margin-top: 10px;
                         }
 
@@ -931,8 +936,8 @@ export default {
                 }
 
                 .midMap {
-                    width: 832px;
-                    height: 856px;
+                    width: 1546px;
+                    height: 1000px;
                     background: url(../../assets/newimg/midbottom.png) no-repeat;
                     background-size: 100% 100%;
                     position: relative;
@@ -955,7 +960,7 @@ export default {
                 }
 
                 .topChart {
-                    width: 832px;
+                    width: 1546px;
                     justify-content: space-between;
                     background-image: url(../../assets/newimg/midtopbg.png);
                     background-repeat: no-repeat;
@@ -1015,7 +1020,7 @@ export default {
                 }
 
                 .botChart {
-                    height: 848px;
+                    height: 925px;
                     display: flex;
                     justify-content: space-between;
 
@@ -1143,7 +1148,8 @@ export default {
                                 height: 150px;
                                 box-sizing: border-box;
                                 position: relative;
-                                background-position-y:8px ;
+                                background-position-y: 8px;
+
                                 .btnGroup {
                                     position: absolute;
                                     right: 25px;
@@ -1194,9 +1200,11 @@ export default {
                                     display: flex;
                                     align-items: center;
                                     justify-content: center;
-                                    img{
+
+                                    img {
                                         width: 50px;
                                     }
+
                                     p {
                                         font-family: FXLED;
                                         font-size: 40px;
@@ -1383,7 +1391,6 @@ export default {
 .weather {
     width: 30%;
     height: 25px;
-    margin-top: 10px;
     position: absolute;
     top: 50px;
     left: 100px;
@@ -1409,7 +1416,6 @@ export default {
     right: 100px;
     width: 30%;
     height: 25px;
-    margin-top: 10px;
     justify-content: flex-end;
     padding-right: 20px;
 
@@ -1481,4 +1487,11 @@ export default {
         }
     }
 }
+
+.newLeftdivitem {
+    width: 601px !important;
+    height: 925px !important;
+    background: url('../../assets/newimg/newLeftBG.png') no-repeat !important;
+    background-size: 100% 100%;
+}
 </style>

src/components/page/data.js

@@ -614,10 +614,19 @@ function getPie3D(pieData, internalDiameterRatio) {
 
 
 // 进行线的截断
-export function initLine(yAxisData,data1,data2,data3) {
-//     let yAxisData = ['07/01', '07/02', '07/03', '07/04', '07/05', '07/06', '07/07',]
-// let data = [100, 90, 200, 250, 240, 500, 120, 390,]
+export function initLine(yAxisData, data1, data2, data3) {
+    //     let yAxisData = ['07/01', '07/02', '07/03', '07/04', '07/05', '07/06', '07/07',]
+    // let data = [100, 90, 200, 250, 240, 500, 120, 390,]
     return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                crossStyle: {
+                    color: '#999'
+                }
+            }
+        },
         legend: {
             orient: "vertical",
             top: "10%",
@@ -634,11 +643,12 @@ export function initLine(yAxisData,data1,data2,data3) {
                 color: "#ffffff",
                 padding: [0, 0, 0, 0],
             },
+            show: false
         },
         backgroundColor: 'rgba(0,0,0,0)',
         grid: {
             top: "25%",
-            right: "15%",
+            right: "5%",
             bottom: "15%"
         },
         xAxis: {
@@ -657,7 +667,7 @@ export function initLine(yAxisData,data1,data2,data3) {
         yAxis: {
             type: 'value',
             name: '单位：吨',
-    
+
             axisLine: {
                 lineStyle: {
                     color: '#94A7BD'//轴线和单位颜色
@@ -706,7 +716,7 @@ export function initLine(yAxisData,data1,data2,data3) {
                         itemStyle: { color: 'rgb(254,84,21)', shadowColor: 'rgb(254,84,21)', shadowBlur: 10 }
                     }
                 }
-    
+
                 return item
             })
         }, {
@@ -744,7 +754,7 @@ export function initLine(yAxisData,data1,data2,data3) {
                 }
                 return item != '-' ? item : '-'
             })
-        }, 
+        },
         // {
         //     name: '煤炭',
         //     type: 'line',
@@ -781,7 +791,7 @@ export function initLine(yAxisData,data1,data2,data3) {
         //         return item != '-' ? item : '-'
         //     })
         // },
-         {
+        {
             name: '石灰石',
             type: 'line',
             // symbolSize: 10,