|
@@ -12,240 +12,38 @@
|
|
|
src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=2&bd=0&k=&f=#545555<f=#545555&htf=ffffff&q=1&e=1&a=1&c=72036&w=180&h=36&align=center"
|
|
|
></iframe>
|
|
|
</div>
|
|
|
- <panel-group :cdata="data.count"/>
|
|
|
<!--散货过车和重量监控-->
|
|
|
<div class="chart-wrapper">
|
|
|
- <div class="pop" style="width: 40%">
|
|
|
- <div class="out" style="margin: 0px; margin-top: 5px">
|
|
|
+ <div class="pop" style="width: 70%">
|
|
|
+ <div class="out">
|
|
|
<div class="int">
|
|
|
<div class="bos" style="border: 0px">
|
|
|
<div class="lab">
|
|
|
<div class="bsg"></div>
|
|
|
- <div class="tit">
|
|
|
- <span>散货过车和重量监控</span>
|
|
|
- <span class="jz">截至{{ time }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rows">
|
|
|
- <div class="row">
|
|
|
- <div class="ou">
|
|
|
- <div class="in" style="background: linear-gradient(90deg, rgba(120, 215, 121, 1) 26%, rgba(95, 196, 91, 1) 100%)">
|
|
|
- <div class="tti">本日</div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.sDayCar || 0 }}</span>
|
|
|
- <span class="unit">辆</span>
|
|
|
- </div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.sDayWeight ? (data.pass.sDayWeight / 1000).toFixed(0) : 0 }}</span>
|
|
|
- <span class="unit">吨</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="ou">
|
|
|
- <div class="in" style="background: linear-gradient(90deg, rgba(181, 188, 253, 1) 26%, rgba(120, 141, 248, 1) 100%)">
|
|
|
- <div class="tti">本周</div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.sWeekCar }}</span>
|
|
|
- <span class="unit">辆</span>
|
|
|
- </div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.sWeekWeight ? (data.pass.sWeekWeight / 1000).toFixed(0) : 0 }}</span>
|
|
|
- <span class="unit">吨</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="ou">
|
|
|
- <div class="in" style="background: linear-gradient(90deg, rgba(255, 206, 153, 1) 26%, rgba(250, 168, 113, 1) 100%)">
|
|
|
- <div class="tti">本月</div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.sMonthCar }}</span>
|
|
|
- <span class="unit">辆</span>
|
|
|
- </div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.sMonthWeight ? (data.pass.sMonthWeight / 1000).toFixed(0) : 0 }}</span>
|
|
|
- <span class="unit">吨</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="tit">账户信息</div>
|
|
|
</div>
|
|
|
+ <companyInfo></companyInfo>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!--集装箱过车和重量监控-->
|
|
|
- <div class="pop" style="width: 60%">
|
|
|
- <div class="out" style="margin: 0px; margin-top: 5px">
|
|
|
+ <div class="out">
|
|
|
<div class="int">
|
|
|
<div class="bos" style="border: 0px">
|
|
|
<div class="lab">
|
|
|
<div class="bsg"></div>
|
|
|
- <div class="tit">
|
|
|
- <span>集装箱过车和重量监控</span>
|
|
|
- <span class="jz">截至{{ time }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rows">
|
|
|
- <div class="row">
|
|
|
- <div class="ou">
|
|
|
- <div class="in" style="background: linear-gradient(90deg, rgba(254, 152, 244, 1) 26%, rgba(255, 114, 233, 1) 100%)">
|
|
|
- <div class="tti">本日</div>
|
|
|
- <div class="rows">
|
|
|
- <div class="row" style="text-align: center; width: 50%">
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jDayCarI || 0 }}</span>
|
|
|
- <span class="unit">辆(进)</span>
|
|
|
- </div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jDayBoxNumI || 0 }}</span>
|
|
|
- <span class="unit">标箱</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row" style="text-align: left; width: 50%">
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jDayCarE || 0 }}</span>
|
|
|
- <span class="unit">辆(出)</span>
|
|
|
- </div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jDayBoxNumE || 0 }}</span>
|
|
|
- <span class="unit">标箱</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="ou">
|
|
|
- <div class="in" style="background: linear-gradient(90deg, rgba(94, 173, 252, 1) 26%, rgba(68, 133, 254, 1) 100%)">
|
|
|
- <div class="tti">本周</div>
|
|
|
- <div class="rows">
|
|
|
- <div class="row" style="text-align: center; width: 50%">
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jWeekCarI || 0 }}</span>
|
|
|
- <span class="unit">辆(进)</span>
|
|
|
- </div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jWeekBoxNumI || 0 }}</span>
|
|
|
- <span class="unit">标箱</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row" style="text-align: left; width: 50%">
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jWeekCarE || 0 }}</span>
|
|
|
- <span class="unit">辆(出)</span>
|
|
|
- </div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jWeekBoxNumE || 0 }}</span>
|
|
|
- <span class="unit">标箱</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="ou">
|
|
|
- <div class="in" style="background: linear-gradient(90deg, rgba(129, 159, 253, 1) 26%, rgba(52, 97, 243, 1) 100%)">
|
|
|
- <div class="tti">本月</div>
|
|
|
- <div class="rows">
|
|
|
- <div class="row" style="text-align: center; width: 50%">
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jMonthCarI || 0 }}</span>
|
|
|
- <span class="unit">辆(进)</span>
|
|
|
- </div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jMonthBoxNumI || 0 }}</span>
|
|
|
- <span class="unit">标箱</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row" style="text-align: left; width: 50%">
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jMonthCarE || 0 }}</span>
|
|
|
- <span class="unit">辆(出)</span>
|
|
|
- </div>
|
|
|
- <div class="num">
|
|
|
- <span>{{ data.pass.jMonthBoxNumE || 0 }}</span>
|
|
|
- <span class="unit">标箱</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="tit">账户信息</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!--场内作业车辆实时统计 -->
|
|
|
- <div class="chart-wrapper">
|
|
|
- <div class="pop" style="width: 100%">
|
|
|
- <div class="out" style="margin: 0px; margin-top: 5px">
|
|
|
+ <div class="pop" style="width: 30%">
|
|
|
+ <div class="out" style="margin-right: 0px">
|
|
|
<div class="int">
|
|
|
<div class="bos" style="border: 0px">
|
|
|
<div class="lab">
|
|
|
<div class="bsg"></div>
|
|
|
- <div class="tit">
|
|
|
- <span>散货一次性通行概率</span>
|
|
|
- <span class="jz">截至{{ time }}</span>
|
|
|
- </div>
|
|
|
- <div class="years">
|
|
|
- <div class="year active">本周</div>
|
|
|
- <div class="year">更多</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rows">
|
|
|
- <div class="row" style="width: 20%">
|
|
|
- <div class="ou">
|
|
|
- <div class="in" style="background: linear-gradient(90deg, rgba(254, 152, 244, 1) 26%, rgba(255, 114, 233, 1) 100%)">
|
|
|
- <div class="tti" style="font-size: 20px; padding-top: 20px">场内散货作业车辆</div>
|
|
|
- <div class="num" style="padding-top: 20px; padding-bottom: 20px">
|
|
|
- <span>{{ data.count.scars || 0 }}</span>
|
|
|
- <span class="unit">辆</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row" style="width: 20%">
|
|
|
- <el-progress type="circle" :percentage="data.pass.sSuccess ? ((data.pass.sSuccess / data.pass.sDayCar) * 100).toFixed(0) : 0" :stroke-width="15"></el-progress>
|
|
|
- <div class="day">本日通行概率</div>
|
|
|
- </div>
|
|
|
- <div class="row" style="width: 60%">
|
|
|
- <BarChart :chartData="chartData1" type="line" height="160px"></BarChart>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="lab" style="margin-top: 20px">
|
|
|
- <div class="bsg"></div>
|
|
|
- <div class="tit">
|
|
|
- <span>集装箱一次性通行概率</span>
|
|
|
- <span class="jz">截至{{ time }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rows">
|
|
|
- <div class="row" style="width: 20%">
|
|
|
- <div class="ou">
|
|
|
- <div class="in" style="background: linear-gradient(90deg, #46a6ff 26%, #81c2ff 100%)">
|
|
|
- <div class="tti" style="font-size: 20px; padding-top: 20px">场内集装箱作业车辆</div>
|
|
|
- <div class="num" style="padding-top: 15px; padding-bottom: 20px">
|
|
|
- <span>{{ data.count.jcars }}</span>
|
|
|
- <span class="unit">辆</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row" style="width: 20%">
|
|
|
- <el-progress type="circle" :percentage="data.pass.jSuccess ? ((data.pass.jSuccess / data.pass.jDayCarI) * 100).toFixed(0) : 0" :stroke-width="15"></el-progress>
|
|
|
- <div class="day">本日通行概率</div>
|
|
|
- </div>
|
|
|
- <div class="row" style="width: 60%">
|
|
|
- <BarChart :chartData="chartData2" type="line" height="160px"></BarChart>
|
|
|
- </div>
|
|
|
+ <div class="tit">用户信息</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -317,16 +115,16 @@ export default {
|
|
|
.chart-wrapper {
|
|
|
margin-top: 12px;
|
|
|
overflow: hidden;
|
|
|
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
|
|
|
- background: #fff;
|
|
|
- border-radius: 5px;
|
|
|
.pop {
|
|
|
float: left;
|
|
|
width: 33.33%;
|
|
|
overflow: hidden;
|
|
|
.out {
|
|
|
- margin: 10px;
|
|
|
+ margin: 10px 10px 20px 0px;
|
|
|
.int {
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ background: white;
|
|
|
+ border-radius: 5px;
|
|
|
padding: 15px 15px 10px 15px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
@@ -337,57 +135,6 @@ export default {
|
|
|
float: left;
|
|
|
padding: 0px 10px 0px 10px;
|
|
|
width: 100%;
|
|
|
- .years {
|
|
|
- float: right;
|
|
|
- margin-top: -30px;
|
|
|
- overflow: hidden;
|
|
|
- .year {
|
|
|
- float: left;
|
|
|
- padding: 5px 10px;
|
|
|
- background-color: #f6f6f6;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 14px;
|
|
|
- color: #545555;
|
|
|
- &.active {
|
|
|
- background-color: rgb(64, 158, 255);
|
|
|
- color: white;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rows {
|
|
|
- overflow: hidden;
|
|
|
- .row {
|
|
|
- float: left;
|
|
|
- width: 33.3333%;
|
|
|
- text-align: center;
|
|
|
- .ou {
|
|
|
- padding: 0px 10px 0px 10px;
|
|
|
- .in {
|
|
|
- padding: 10px;
|
|
|
- text-align: center;
|
|
|
- color: white;
|
|
|
- border-radius: 10px;
|
|
|
- .tti {
|
|
|
- font-size: 30px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .num {
|
|
|
- padding-top: 5px;
|
|
|
- font-size: 22px;
|
|
|
- .unit {
|
|
|
- font-size: 15px;
|
|
|
- padding-left: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .day {
|
|
|
- font-size: 18px;
|
|
|
- padding-top: 7px;
|
|
|
- color: #838383;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</style>
|