|
|
@@ -18,8 +18,8 @@
|
|
|
</div>
|
|
|
<div class="content-list-box">
|
|
|
<div class="content-list-box-bp">
|
|
|
- <div class="flex">
|
|
|
- <div class="total-transportation-info">
|
|
|
+ <div class="total-transportation-info">
|
|
|
+ <div class="flex">
|
|
|
<div class="content-list-box-bp-title">运输总量</div>
|
|
|
<div class="total-transportation-info-icons">
|
|
|
<div class="total-transportation-info-icons-list">
|
|
|
@@ -30,15 +30,11 @@
|
|
|
<span class="icon2 icon"></span>
|
|
|
<span class="text">托运旅客数</span>
|
|
|
</div>
|
|
|
- <div class="total-transportation-info-icons-list">
|
|
|
- <span class="icon3 icon"></span>
|
|
|
- <span class="text">旅客数</span>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="total-transportation-content">
|
|
|
- <LineCharts id="total-transportation" :option="totalOption" />
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="total-transportation-content">
|
|
|
+ <LineCharts id="total-transportation" :option="totalOption" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -165,6 +161,7 @@ import BarCharts from '@/layout/components/Echarts/commonChartsBar.vue'
|
|
|
import PieCharts from '@/layout/components/Echarts/commonChartsPie.vue'
|
|
|
import MapCharts from '@/layout/components/Echarts/commonChartsChinaMap.vue'
|
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
|
+import { Query } from "@/api/dataIntegration"
|
|
|
const citydata = [{
|
|
|
name: "北京",
|
|
|
value: 974
|
|
|
@@ -368,55 +365,62 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
countEnterNum: '4567891',
|
|
|
- orderNum: ['0', '0', '0', '0', '0', '0', '0'],
|
|
|
+ orderNum: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
|
|
|
statisticalData: [
|
|
|
{
|
|
|
id: 1,
|
|
|
src: require('../../../assets/analysis/ic_time_statistical.png'),
|
|
|
info: '28',
|
|
|
msg: '平均运输时间',
|
|
|
- dw: 'min'
|
|
|
+ dw: 'min',
|
|
|
+ key: 'transportation'
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
src: require('../../../assets/analysis/ic_time_statistical.png'),
|
|
|
info: '28',
|
|
|
- msg: '平均运输时间',
|
|
|
- dw: 'min'
|
|
|
+ msg: '平均装机时间',
|
|
|
+ dw: 'min',
|
|
|
+ key: 'installation'
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
src: require('../../../assets/analysis/ic_luggage_statistical.png'),
|
|
|
info: '0.21',
|
|
|
msg: '人均托运',
|
|
|
- dw: '件/人'
|
|
|
+ dw: '件/人',
|
|
|
+ key: 'avgbag'
|
|
|
},
|
|
|
{
|
|
|
id: 4,
|
|
|
src: require('../../../assets/analysis/ic_change_statistical.png'),
|
|
|
info: '176',
|
|
|
msg: '中转数',
|
|
|
- dw: '件'
|
|
|
+ dw: '件',
|
|
|
+ key: 'transnum'
|
|
|
}
|
|
|
],
|
|
|
totalOption: {
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
- legend: {
|
|
|
- data: ['运输总数', '托运旅客数', '旅客数']
|
|
|
- },
|
|
|
+ // legend: {
|
|
|
+ // data: ['运输总数', '托运旅客数'],
|
|
|
+ // show: true,
|
|
|
+ // top: 0,
|
|
|
+ // icon: 'roundRect'
|
|
|
+ // },
|
|
|
grid: {
|
|
|
left: '0%',
|
|
|
right: '0%',
|
|
|
bottom: '0%',
|
|
|
- top: '5%',
|
|
|
+ top: '15%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
color: ['#F5BB3D', '#73D970', '#6A9DD9'],
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
+ boundaryGap: true,
|
|
|
data: ['2021.12', '2022.01', '2022.02', '2022.03', '2022.04', '2022.05'],
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
@@ -428,14 +432,16 @@ export default {
|
|
|
show: false
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- color: '#fff'
|
|
|
+ color: '#fff',
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
axisLabel: {
|
|
|
color: '#fff',
|
|
|
- formatter: '{value} 万'
|
|
|
+ formatter: function (item) {
|
|
|
+ return (item / 10000) + '万'
|
|
|
+ }
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
@@ -449,6 +455,7 @@ export default {
|
|
|
name: '运输总数',
|
|
|
type: 'line',
|
|
|
symbol: 'none',
|
|
|
+ key: 'bagsnum',
|
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
@@ -470,6 +477,7 @@ export default {
|
|
|
name: '托运旅客数',
|
|
|
type: 'line',
|
|
|
symbol: 'none',
|
|
|
+ key: 'passengers',
|
|
|
data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
@@ -487,27 +495,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
- {
|
|
|
- name: '旅客数',
|
|
|
- type: 'line',
|
|
|
- symbol: 'none',
|
|
|
- data: [150, 232, 201, 154, 190, 330, 410],
|
|
|
- areaStyle: {
|
|
|
- color: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0, color: 'rgba(125,72,255,0.5)'
|
|
|
- }, {
|
|
|
- offset: 1, color: 'rgba(0,180,255,0.01)'
|
|
|
- }],
|
|
|
- global: false
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
]
|
|
|
},
|
|
|
dataOption: {
|
|
|
@@ -1045,7 +1032,101 @@ export default {
|
|
|
this.getCountEnterNum();
|
|
|
}
|
|
|
},
|
|
|
+ created () {
|
|
|
+ this.getDataInit()
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ //获取运输总量
|
|
|
+ async getOrderNum () {
|
|
|
+ const { code, returnData } = await Query({
|
|
|
+ id: 18012,
|
|
|
+ dataContent: []
|
|
|
+ })
|
|
|
+ if (code == 0) {
|
|
|
+ const { listValues } = returnData
|
|
|
+ this.countEnterNum = listValues[0]['bagsnum']
|
|
|
+ } else {
|
|
|
+ this.countEnterNum = '000000000'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取运输总量-统计图
|
|
|
+ async getOrderNumChart () {
|
|
|
+ const { code, returnData } = await Query({
|
|
|
+ id: 18013,
|
|
|
+ dataContent: []
|
|
|
+ })
|
|
|
+ if (code == 0) {
|
|
|
+ const { listValues } = returnData
|
|
|
+ const [mouth, bagsnum, passengers] = [[], [], []]
|
|
|
+ listValues.forEach(item => {
|
|
|
+ mouth.push(item.month)
|
|
|
+ bagsnum.push(item.bagsnum)
|
|
|
+ passengers.push(item.passengers)
|
|
|
+ })
|
|
|
+ this.totalOption.xAxis.data = mouth
|
|
|
+ this.totalOption.series.map(item => {
|
|
|
+ if (item.key == 'bagsnum') {
|
|
|
+ item.data = bagsnum
|
|
|
+ } else if (item.key == 'passengers') {
|
|
|
+ item.data = passengers
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取统计数据
|
|
|
+ async getStatistical () {
|
|
|
+ const { code, returnData } = await Query({
|
|
|
+ id: 18014,
|
|
|
+ dataContent: []
|
|
|
+ })
|
|
|
+ if (code == 0) {
|
|
|
+ const { listValues } = returnData
|
|
|
+ const { avgbag, transnum } = listValues[0]
|
|
|
+ this.statisticalData.map(item => {
|
|
|
+ if (item.key == 'avgbag') {
|
|
|
+ item.info = avgbag
|
|
|
+ } else if (item.key == 'transnum') {
|
|
|
+ item.info = transnum
|
|
|
+ } else {
|
|
|
+ item.info = '-'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.statisticalData.map(item => {
|
|
|
+ item.info = '-'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取航班数
|
|
|
+ async getFignts () {
|
|
|
+ const { code, returnData } = await Query({
|
|
|
+ id: 18015,
|
|
|
+ dataContent: []
|
|
|
+ })
|
|
|
+ if (code == 0) {
|
|
|
+ const { listValues } = returnData
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取中转数
|
|
|
+ async getSpeed () {
|
|
|
+ const result = await Query({
|
|
|
+ id: 18016,
|
|
|
+ dataContent: []
|
|
|
+ })
|
|
|
+ console.log(result)
|
|
|
+ },
|
|
|
+ //获取初始数据
|
|
|
+ getDataInit () {
|
|
|
+ this.getOrderNum()
|
|
|
+ this.getOrderNumChart()
|
|
|
+ this.getStatistical()
|
|
|
+ this.getFignts()
|
|
|
+ this.getSpeed()
|
|
|
+ },
|
|
|
getCountEnterNum () {
|
|
|
this.$nextTick(() => {
|
|
|
this.toOrderNum(this.countEnterNum); // 这里输入数字即可调用
|
|
|
@@ -1054,10 +1135,10 @@ export default {
|
|
|
},
|
|
|
toOrderNum (num) {
|
|
|
num = num.toString()
|
|
|
- if (num.length < 6) {
|
|
|
+ if (num.length < 9) {
|
|
|
num = '0' + num // 如未满八位数，添加"0"补位
|
|
|
this.toOrderNum(num) // 递归添加"0"补位
|
|
|
- } else if (num.length >= 6) {
|
|
|
+ } else if (num.length >= 9) {
|
|
|
this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
|
|
|
} else {
|
|
|
// 订单总量数字超过八位显示异常
|
|
|
@@ -1074,9 +1155,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
- mounted () {
|
|
|
- this.getCountEnterNum();
|
|
|
- },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -1149,19 +1227,19 @@ export default {
|
|
|
}
|
|
|
.total-transportation {
|
|
|
&-info {
|
|
|
- width: 100px;
|
|
|
- margin-right: 30px;
|
|
|
&-icons {
|
|
|
- margin-top: 40px;
|
|
|
+ display: flex;
|
|
|
}
|
|
|
&-icons-list {
|
|
|
- margin-top: 20px;
|
|
|
+ margin-right: 20px;
|
|
|
.icon {
|
|
|
width: 14px;
|
|
|
height: 14px;
|
|
|
border-radius: 2px;
|
|
|
display: inline-block;
|
|
|
margin-right: 8px;
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
}
|
|
|
.icon1 {
|
|
|
background: #f5bb3d;
|
|
|
@@ -1178,10 +1256,13 @@ export default {
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
&-content {
|
|
|
- min-height: 200px;
|
|
|
+ height: 100%;
|
|
|
flex: 1;
|
|
|
position: relative;
|
|
|
}
|
|
|
@@ -1195,9 +1276,6 @@ export default {
|
|
|
background: #1e3c6f;
|
|
|
border-radius: 50%;
|
|
|
margin-right: 24px;
|
|
|
- img {
|
|
|
- max-width: 100%;
|
|
|
- }
|
|
|
}
|
|
|
.info {
|
|
|
&-time {
|
|
|
@@ -1314,7 +1392,8 @@ export default {
|
|
|
text-align: center;
|
|
|
list-style: none;
|
|
|
color: #2d7cff;
|
|
|
- writing-mode: vertical-lr;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
text-orientation: upright;
|
|
|
/*文字禁止编辑*/
|
|
|
-moz-user-select: none; /*火狐*/
|
