'页面修改'
This commit is contained in:
徐克
parent
2a0d823446
commit
bcc14c6916
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
|
|
@ -131,6 +131,53 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 切换按钮样式
|
||||||
|
.tabs_datag1 {
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 0 30px 0 0;
|
||||||
|
li {
|
||||||
|
margin: 0 5px;
|
||||||
|
width: 66px;
|
||||||
|
height: 24px;
|
||||||
|
padding-top: 2px;
|
||||||
|
//background: #09304a;
|
||||||
|
background: linear-gradient(-45deg,transparent 8px,#09304a 0);
|
||||||
|
//border: 1px solid transparent;
|
||||||
|
color: #8ebbcd;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:nth-child(1) {
|
||||||
|
margin: 0 5px;
|
||||||
|
width: 66px;
|
||||||
|
height: 24px;
|
||||||
|
//background: #0b4471;
|
||||||
|
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
|
||||||
|
//border: 1px solid transparent;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:hover {
|
||||||
|
margin: 0 5px;
|
||||||
|
width: 66px;
|
||||||
|
height: 24px;
|
||||||
|
//background: #0b4471;
|
||||||
|
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
|
||||||
|
//border: 1px solid transparent;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.colorBlack {
|
.colorBlack {
|
||||||
color: #272727 !important;
|
color: #272727 !important;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div id="echart" style="width: auto;height: 250px"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "safeChart",
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getecharts()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
getecharts(){
|
||||||
|
const colors = ['#C51C1C', '#F5C212', '#1BE274']
|
||||||
|
var echarts = this.$echarts.init(
|
||||||
|
document.getElementById("echart")
|
||||||
|
);
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
formatter: '{a} <br/>{b} : {c}%'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Pressure',
|
||||||
|
type: 'gauge',
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 10,
|
||||||
|
// color: [[1, '#D7EAFF']]
|
||||||
|
color: [
|
||||||
|
[0.25, new this.$echarts.graphic.LinearGradient(
|
||||||
|
// 右下左上，渐变色从正下方开始，下面的以此类推
|
||||||
|
1, 0, 0, 0,
|
||||||
|
[
|
||||||
|
{offset: 0, color: colors[0]},
|
||||||
|
{offset: 0.7, color: colors[1]}
|
||||||
|
]
|
||||||
|
)],
|
||||||
|
[0.5, new this.$echarts.graphic.LinearGradient(
|
||||||
|
0, 0, 1, 0,
|
||||||
|
[
|
||||||
|
{offset: 0, color: colors[1]},
|
||||||
|
{offset: 0, color: colors[1]}
|
||||||
|
]
|
||||||
|
)],
|
||||||
|
[0.75, new this.$echarts.graphic.LinearGradient(
|
||||||
|
0, 0, 1, 1,
|
||||||
|
[
|
||||||
|
{offset: 0.0, color: colors[1]},
|
||||||
|
{offset: 1, color: colors[2]}
|
||||||
|
]
|
||||||
|
)],
|
||||||
|
[1, new this.$echarts.graphic.LinearGradient(
|
||||||
|
0, 0, 0, 1,
|
||||||
|
[
|
||||||
|
{offset: 0.5, color: colors[2]},
|
||||||
|
{offset: 1, color: colors[2]}
|
||||||
|
]
|
||||||
|
)]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
length:"70%",
|
||||||
|
offsetCenter:[0,"-60%"],
|
||||||
|
itemStyle: {
|
||||||
|
color: 'auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
distance:5,
|
||||||
|
color: 'rgb(60,209,233)',
|
||||||
|
formatter:"{value}"
|
||||||
|
},
|
||||||
|
splitLine:{
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
length:20,
|
||||||
|
splitNumber:5,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'auto',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
formatter: '{value}',
|
||||||
|
color:'transition'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
};
|
||||||
|
echarts.setOption(option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -50,25 +50,182 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="middle">
|
<div class="middle">
|
||||||
<div>
|
<div class="data-block-bk mar-top">
|
||||||
|
<div class="data-tit-bg">车均费用排名统计</div>
|
||||||
<img src="../../assets/img/cb1.png" alt="">
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
<template slot="top">
|
<template slot="top">
|
||||||
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
</template>
|
</template>
|
||||||
</BasicBoxCostControl> -->
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left: 86%">
|
||||||
|
<li>公务用车</li>
|
||||||
|
</ul>
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>总费用</li>
|
||||||
|
<li>加油费用</li>
|
||||||
|
<li style="width: 100px">维修保养费用</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 1%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>费用类别</li>
|
||||||
|
<li>车型</li>
|
||||||
|
<li>车均费用</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData" :key="item.id">
|
||||||
|
<li v-if="typeof item.id === 'number'">{{item.id}}</li>
|
||||||
|
<li v-else><img :src="item.id"/></li>
|
||||||
|
<li>{{item.type}}</li>
|
||||||
|
<li>{{item.carType}}</li>
|
||||||
|
<li>{{item.cost}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="data-block-bk mar-top" style="margin-top: 5%;position:relative;">
|
||||||
|
<div class="data-tit-bg">单车成本排名</div>
|
||||||
|
<!-- <img src="../../assets/img/cb2.png" alt="">-->
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left: 86%">
|
||||||
|
<li>公务用车</li>
|
||||||
|
</ul>
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>总费用</li>
|
||||||
|
<li>加油费用</li>
|
||||||
|
<li style="width: 100px">维修保养费用</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 1%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>费用类别</li>
|
||||||
|
<li>车型</li>
|
||||||
|
<li>车牌号</li>
|
||||||
|
<li>车均费用</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData1" :key="item.id">
|
||||||
|
<li v-if="typeof item.id === 'number'">{{item.id}}</li>
|
||||||
|
<li v-else><img :src="item.id"/></li>
|
||||||
|
<li>{{item.type}}</li>
|
||||||
|
<li>{{item.carType}}</li>
|
||||||
|
<li>{{item.carCode}}</li>
|
||||||
|
<li>{{item.cost}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top:15px">
|
|
||||||
<img src="../../assets/img/cb2.png" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rightTravel">
|
<div class="rightTravel">
|
||||||
<div>
|
<!-- <div>-->
|
||||||
<img src="../../assets/img/cb3.png" alt="">
|
<!-- <img src="../../assets/img/cb3.png" alt="">-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="data-block-bk mar-top">
|
||||||
|
<div class="data-tit-bg">品牌型号成本排名</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left: 86%">
|
||||||
|
<li>公务用车</li>
|
||||||
|
</ul>
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>总费用</li>
|
||||||
|
<li>加油费用</li>
|
||||||
|
<li style="width: 100px">维修保养费用</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 1%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>费用类别</li>
|
||||||
|
<li>车型</li>
|
||||||
|
<li>品牌</li>
|
||||||
|
<li>车均费用</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData2" :key="item.id">
|
||||||
|
<li v-if="typeof item.id === 'number'">{{item.id}}</li>
|
||||||
|
<li v-else><img :src="item.id"/></li>
|
||||||
|
<li>{{item.type}}</li>
|
||||||
|
<li>{{item.carType}}</li>
|
||||||
|
<li>{{item.brand}}</li>
|
||||||
|
<li>{{item.cost}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div style="margin-top:15px">-->
|
||||||
|
<!-- <img src="../../assets/img/cb4.png" alt="">-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="data-block-bk mar-top" style="margin-top: 5%;position:relative;">
|
||||||
|
<div class="data-tit-bg">动力类型成本排名</div>
|
||||||
|
<!-- <img src="../../assets/img/cb2.png" alt="">-->
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left: 86%">
|
||||||
|
<li>公务用车</li>
|
||||||
|
</ul>
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>总费用</li>
|
||||||
|
<li>加油费用</li>
|
||||||
|
<li style="width: 100px">维修保养费用</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 1%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>费用类别</li>
|
||||||
|
<li>车型</li>
|
||||||
|
<li>动力类型</li>
|
||||||
|
<li>车均费用</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData3" :key="item.id">
|
||||||
|
<li v-if="typeof item.id === 'number'">{{item.id}}</li>
|
||||||
|
<li v-else><img :src="item.id"/></li>
|
||||||
|
<li>{{item.type}}</li>
|
||||||
|
<li>{{item.carType}}</li>
|
||||||
|
<li>{{item.powerType}}</li>
|
||||||
|
<li>{{item.cost}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top:15px">
|
|
||||||
<img src="../../assets/img/cb4.png" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="rightTravel">
|
<!-- <div class="rightTravel">
|
||||||
|
|
@ -136,6 +293,230 @@ export default {
|
||||||
['其他商服用地', '1', '0.07%'],
|
['其他商服用地', '1', '0.07%'],
|
||||||
['居住用地', '560', '40.85%'],]
|
['居住用地', '560', '40.85%'],]
|
||||||
},
|
},
|
||||||
|
tableData:[
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/1.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/2.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/3.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:4,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:5,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:6,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:7,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:8,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
cost:'5478963元'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tableData1:[
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/1.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
carCode:'苏A56IOK',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/2.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
carCode:'苏AGH596',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/3.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
carCode:'苏ALK960',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:4,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
carCode:'苏AP2589',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:5,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
carCode:'苏A56IOK',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:6,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
carCode:'苏A56IOK',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:7,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
carCode:'苏A56IOK',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:8,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
carCode:'苏A56IOK',
|
||||||
|
cost:'5478963元'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tableData2:[
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/1.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
brand:'大众',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/2.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
brand:'丰田',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/3.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
brand:'奥迪',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:4,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
brand:'大众',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:5,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
brand:'丰田',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:6,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
brand:'奥迪',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:7,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
brand:'大众',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:8,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
brand:'奔驰',
|
||||||
|
cost:'5478963元'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tableData3:[
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/1.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
powerType:'燃油',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/2.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
powerType:'燃油',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:require('../../assets/carTravel/3.png'),
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
powerType:'燃油',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:4,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
powerType:'燃油',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:5,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
powerType:'燃油',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:6,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
powerType:'燃油',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:7,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
powerType:'燃油',
|
||||||
|
cost:'5478963元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:8,
|
||||||
|
type:'总费用',
|
||||||
|
carType:'小车型',
|
||||||
|
powerType:'燃油',
|
||||||
|
cost:'5478963元'
|
||||||
|
}
|
||||||
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -417,4 +798,62 @@ left: 63%;
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "../../assets/scss/index.scss";
|
@import "../../assets/scss/index.scss";
|
||||||
|
.data-block-bk {
|
||||||
|
border: 2px solid #29a3d3a1;
|
||||||
|
// background: #11223289;
|
||||||
|
background: rgba(16,29,37,0.8);
|
||||||
|
// height: 280px;
|
||||||
|
height: 437px;
|
||||||
|
.data-tit-bg {
|
||||||
|
width: 600px;
|
||||||
|
height: 38px;
|
||||||
|
line-height: 38px;
|
||||||
|
padding-left: 50px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
background: -15px url(../../assets/tit.png) no-repeat;
|
||||||
|
// background-size: contain;
|
||||||
|
background-size: 100% 30px;
|
||||||
|
color: #8ec1d8;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.data-flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list-table {
|
||||||
|
.tb-hd,
|
||||||
|
.tb-bd {
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 100%;
|
||||||
|
height: 35px;
|
||||||
|
color: #a6d3e8;
|
||||||
|
li {
|
||||||
|
flex: 0.5;
|
||||||
|
line-height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
&:first-child {
|
||||||
|
flex: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tb-hd {
|
||||||
|
ul {
|
||||||
|
background-color: rgba(14, 45, 66);
|
||||||
|
color: #65c1f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tb-bd {
|
||||||
|
ul {
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,15 @@
|
||||||
<!-- <carTravelLeft /> -->
|
<!-- <carTravelLeft /> -->
|
||||||
<div class="topLeft">
|
<div class="topLeft">
|
||||||
<div class="main-title">用车品牌型号占比</div>
|
<div class="main-title">用车品牌型号占比</div>
|
||||||
<div class="content">
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="content" style="position: relative;margin-top: 20px">
|
||||||
<ul>
|
<ul>
|
||||||
<li >
|
<li >
|
||||||
<img src="../../assets/carTravel/orange.png" alt="">
|
<img src="../../assets/carTravel/orange.png" alt="">
|
||||||
|
|
@ -84,7 +92,15 @@
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<!-- <div class="mainTop"> -->
|
<!-- <div class="mainTop"> -->
|
||||||
<div class="main-title">用车时间趋势</div>
|
<div class="main-title">用车时间趋势</div>
|
||||||
<div class="content">
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="content" style="position: relative;bottom: 30px">
|
||||||
<LineChart1 type="0"></LineChart1>
|
<LineChart1 type="0"></LineChart1>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -103,42 +119,446 @@
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<img src="../../assets/img/gjjg1.png" alt="">
|
<!-- <img src="../../assets/img/gjjg1.png" alt="">-->
|
||||||
|
<div class="rank_head_bk">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 292px">
|
||||||
|
<div class="data-tit-bg">入禁预警</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li style="width: 50px"></li>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>单位名称</li>
|
||||||
|
<li>预警数量</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData" :key="item.id">
|
||||||
|
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.count}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img src="../../assets/img/gjjg2.png" alt="">
|
<!-- <img src="../../assets/img/gjjg2.png" alt="">-->
|
||||||
|
<div class="rank_head_bk" style="margin-left: 3px;position: relative">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 292px">
|
||||||
|
<div class="data-tit-bg">区域异常集中预警</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li style="width: 50px"></li>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>单位名称</li>
|
||||||
|
<li>预警数量</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData" :key="item.id">
|
||||||
|
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.count}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img src="../../assets/img/gjjg3.png" alt="">
|
<!-- <img src="../../assets/img/gjjg3.png" alt="">-->
|
||||||
|
<div class="rank_head_bk" style="margin-left: 3px;position: relative">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 292px">
|
||||||
|
<div class="data-tit-bg">未按规定入库预警</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li style="width: 50px"></li>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>单位名称</li>
|
||||||
|
<li>预警数量</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData" :key="item.id">
|
||||||
|
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.count}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img src="../../assets/img/gjjg4.png" alt="">
|
<!-- <img src="../../assets/img/gjjg4.png" alt="">-->
|
||||||
|
<div class="rank_head_bk" style="margin-left: 3px;position: relative">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 292px">
|
||||||
|
<div class="data-tit-bg">单车规律性停放预警</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li style="width: 50px"></li>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>单位名称</li>
|
||||||
|
<li>预警数量</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData" :key="item.id">
|
||||||
|
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.count}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img src="../../assets/img/gjjg5.png" alt="">
|
<!-- <img src="../../assets/img/gjjg5.png" alt="">-->
|
||||||
|
<div class="rank_head_bk" style="margin-left: 1px;position: relative">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 292px">
|
||||||
|
<div class="data-tit-bg">工作日非工作时间用车预警</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li style="width: 50px"></li>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>单位名称</li>
|
||||||
|
<li>预警数量</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData" :key="item.id">
|
||||||
|
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.count}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<img src="../../assets/img/wenzi2.png" alt="">
|
<img style="margin-top: 4px;" src="../../assets/img/wenzi2.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
||||||
<li >
|
<li >
|
||||||
<img src="../../assets/img/gjjg6.png" alt="">
|
<!-- <img src="../../assets/img/gjjg6.png" alt="">-->
|
||||||
|
<div class="rank_rujin" style="margin-left: 1px;position: relative">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 292px">
|
||||||
|
<div class="data-tit-bg">入禁预警</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li></li>
|
||||||
|
<li style="position: relative;left: -7px">排名</li>
|
||||||
|
<li style="position: relative;left: -7px">车牌号</li>
|
||||||
|
<li style="position: relative;left: 17px">单位名称</li>
|
||||||
|
<li style="position: relative;left: 15px">预警数量</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData1" :key="item.id">
|
||||||
|
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.brand}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.count}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img src="../../assets/img/gjjg7.png" alt="">
|
<!-- <img src="../../assets/img/gjjg7.png" alt="">-->
|
||||||
|
<div class="rank_rujin" style="margin-left: 1px;position: relative">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 292px">
|
||||||
|
<div class="data-tit-bg">区域异常集中预警</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li></li>
|
||||||
|
<li style="position: relative;left: -7px">排名</li>
|
||||||
|
<li style="position: relative;left: -7px">车牌号</li>
|
||||||
|
<li style="position: relative;left: 17px">单位名称</li>
|
||||||
|
<li style="position: relative;left: 15px">预警数量</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData1" :key="item.id">
|
||||||
|
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.brand}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.count}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img src="../../assets/img/gjjg8.png" alt="">
|
<!-- <img src="../../assets/img/gjjg8.png" alt="">-->
|
||||||
|
<div class="rank_rujin" style="margin-left: 1px;position: relative">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 292px">
|
||||||
|
<div class="data-tit-bg">未按规定入库预警</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li></li>
|
||||||
|
<li style="position: relative;left: -7px">排名</li>
|
||||||
|
<li style="position: relative;left: -7px">车牌号</li>
|
||||||
|
<li style="position: relative;left: 17px">单位名称</li>
|
||||||
|
<li style="position: relative;left: 15px">预警数量</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData1" :key="item.id">
|
||||||
|
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.brand}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.count}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img src="../../assets/img/gjjg9.png" alt="">
|
<!-- <img src="../../assets/img/gjjg9.png" alt="">-->
|
||||||
|
<div class="rank_rujin" style="margin-left: 1px;position: relative">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 292px">
|
||||||
|
<div class="data-tit-bg">单车规律性停放预警</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li></li>
|
||||||
|
<li style="position: relative;left: -7px">排名</li>
|
||||||
|
<li style="position: relative;left: -7px">车牌号</li>
|
||||||
|
<li style="position: relative;left: 17px">单位名称</li>
|
||||||
|
<li style="position: relative;left: 15px">预警数量</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData1" :key="item.id">
|
||||||
|
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.brand}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.count}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img src="../../assets/img/gjjg10.png" alt="">
|
<!-- <img src="../../assets/img/gjjg10.png" alt="">-->
|
||||||
|
<div class="rank_rujin" style="margin-left: 1px;position: relative">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 292px">
|
||||||
|
<div class="data-tit-bg">工作日非工作时间用车预警</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div class="tabs_datag1">
|
||||||
|
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
|
||||||
|
<li>当 天</li>
|
||||||
|
<li>当 月</li>
|
||||||
|
<li>近三月</li>
|
||||||
|
<li>近一年</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li></li>
|
||||||
|
<li style="position: relative;left: -7px">排名</li>
|
||||||
|
<li style="position: relative;left: -7px">车牌号</li>
|
||||||
|
<li style="position: relative;left: 17px">单位名称</li>
|
||||||
|
<li style="position: relative;left: 15px">预警数量</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData1" :key="item.id">
|
||||||
|
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.brand}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.count}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -183,7 +603,71 @@ export default {
|
||||||
dateWeek: null,
|
dateWeek: null,
|
||||||
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||||
decorationColor: ["#568aea", "#000000"],
|
decorationColor: ["#568aea", "#000000"],
|
||||||
|
tableData:[
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm1.png'),
|
||||||
|
id:'1',
|
||||||
|
name:'南京市供电公司',
|
||||||
|
count:'11',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm2.png'),
|
||||||
|
id:'2',
|
||||||
|
name:'徐州市供电公司',
|
||||||
|
count:'12',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm3.png'),
|
||||||
|
id:'3',
|
||||||
|
name:'无锡市供电公司',
|
||||||
|
count:'9',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'4',
|
||||||
|
name:'扬州市供电公司',
|
||||||
|
count:'7',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'5',
|
||||||
|
name:'南通市供电公司',
|
||||||
|
count:'5',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData1:[
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm1.png'),
|
||||||
|
id:'1',
|
||||||
|
brand:'苏A12345',
|
||||||
|
name:'南京市供电公司',
|
||||||
|
count:'11',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm2.png'),
|
||||||
|
id:'2',
|
||||||
|
brand:'苏A12345',
|
||||||
|
name:'徐州市供电公司',
|
||||||
|
count:'12',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm3.png'),
|
||||||
|
id:'3',
|
||||||
|
brand:'苏A12345',
|
||||||
|
name:'无锡市供电公司',
|
||||||
|
count:'9',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'4',
|
||||||
|
brand:'苏A12345',
|
||||||
|
name:'扬州市供电公司',
|
||||||
|
count:'7',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'5',
|
||||||
|
brand:'苏A12345',
|
||||||
|
name:'南通市供电公司',
|
||||||
|
count:'5',
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -587,4 +1071,124 @@ left: 63%;
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "../../assets/scss/index.scss";
|
@import "../../assets/scss/index.scss";
|
||||||
|
.rank_head_bk{
|
||||||
|
width: 366px;
|
||||||
|
.data-block-bk {
|
||||||
|
border: 2px solid #29a3d3a1;
|
||||||
|
// background: #11223289;
|
||||||
|
background: rgba(16,29,37,0.8);
|
||||||
|
width: 366px;
|
||||||
|
.data-tit-bg {
|
||||||
|
width: 366px;
|
||||||
|
height: 38px;
|
||||||
|
line-height: 38px;
|
||||||
|
padding-left: 50px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
background: -15px url(../../assets/tit.png) no-repeat;
|
||||||
|
// background-size: contain;
|
||||||
|
background-size: 100% 30px;
|
||||||
|
color: #8ec1d8;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.data-flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
.list-table {
|
||||||
|
.tb-hd,
|
||||||
|
.tb-bd {
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 100%;
|
||||||
|
height: 34px;
|
||||||
|
color: #a6d3e8;
|
||||||
|
li {
|
||||||
|
flex: 0.5;
|
||||||
|
line-height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
&:first-child {
|
||||||
|
flex: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tb-hd {
|
||||||
|
ul {
|
||||||
|
background-color: rgba(14, 45, 66);
|
||||||
|
color: #65c1f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tb-bd {
|
||||||
|
ul {
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rank_rujin{
|
||||||
|
width: 366px;
|
||||||
|
.data-block-bk {
|
||||||
|
border: 2px solid #29a3d3a1;
|
||||||
|
// background: #11223289;
|
||||||
|
background: rgba(16,29,37,0.8);
|
||||||
|
width: 366px;
|
||||||
|
.data-tit-bg {
|
||||||
|
width: 366px;
|
||||||
|
height: 38px;
|
||||||
|
line-height: 38px;
|
||||||
|
padding-left: 50px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
background: -15px url(../../assets/tit.png) no-repeat;
|
||||||
|
// background-size: contain;
|
||||||
|
background-size: 100% 30px;
|
||||||
|
color: #8ec1d8;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.data-flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
.list-table {
|
||||||
|
.tb-hd,
|
||||||
|
.tb-bd {
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 100%;
|
||||||
|
height: 34px;
|
||||||
|
color: #a6d3e8;
|
||||||
|
li {
|
||||||
|
//flex: 0.5;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
&:first-child {
|
||||||
|
flex: 0.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tb-hd {
|
||||||
|
ul {
|
||||||
|
background-color: rgba(14, 45, 66);
|
||||||
|
color: #65c1f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tb-bd {
|
||||||
|
ul {
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -50,8 +50,86 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="leftTravel">
|
<div class="leftTravel">
|
||||||
<div class="img">
|
<!-- <div class="img">-->
|
||||||
<img src="../../assets/img/gx1.png" alt="">
|
<!-- <img src="../../assets/img/gx1.png" alt="">-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="leftHeader">
|
||||||
|
<div class="head">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
报废更新概况
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
用车分析概况
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="data-block-bk mar-top">
|
||||||
|
<div class="data-tit-bg" style="margin-top: 4%;">公务用车按报废车型统计</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>车型</li>
|
||||||
|
<li>平均年限</li>
|
||||||
|
<li>平均里程</li>
|
||||||
|
<li>平均维修成本</li>
|
||||||
|
<li>车辆更新率</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData" :key="item.id">
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.carType}}</li>
|
||||||
|
<li>{{item.ageAvg}}</li>
|
||||||
|
<li>{{item.mileAvg}}</li>
|
||||||
|
<li>{{item.repairAvg}}</li>
|
||||||
|
<li>{{item.renRate}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="position: relative;margin-top: 2%">
|
||||||
|
<div class="data-tit-bg">生产用车按报废车型统计</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%;margin-bottom: 1.8%;">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>车型</li>
|
||||||
|
<li>平均年限</li>
|
||||||
|
<li>平均里程</li>
|
||||||
|
<li>平均维修成本</li>
|
||||||
|
<li>车辆更新率</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData" :key="item.id">
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.carType}}</li>
|
||||||
|
<li>{{item.ageAvg}}</li>
|
||||||
|
<li>{{item.mileAvg}}</li>
|
||||||
|
<li>{{item.repairAvg}}</li>
|
||||||
|
<li>{{item.renRate}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bingimg">
|
<div class="bingimg">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
|
|
@ -143,15 +221,150 @@
|
||||||
</div>
|
</div>
|
||||||
<div style="display:inline-block;width:30%;position: absolute;
|
<div style="display:inline-block;width:30%;position: absolute;
|
||||||
left: 24%;">
|
left: 24%;">
|
||||||
<img src="../../assets/img/gx2.png" alt="">
|
<!-- <img src="../../assets/img/gx2.png" alt=""> -->
|
||||||
|
<div class="rankHead">
|
||||||
|
<div class="head">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
公务用车
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
生产服务用车
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rank_head_bk">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 344px">
|
||||||
|
<div class="data-tit-bg" style="margin-top: 4%;">车辆使用率较高的单位排名</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li style="width: 50px"></li>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>单位名称</li>
|
||||||
|
<li>车型</li>
|
||||||
|
<li>使用率</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData1" :key="item.id">
|
||||||
|
<li><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.carType}}</li>
|
||||||
|
<li>{{item.useRate}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display:inline-block;position: absolute;
|
<div style="display:inline-block;position: absolute;
|
||||||
left: 48%;">
|
left: 48%;">
|
||||||
<img src="../../assets/img/gx3.png" alt="">
|
<!-- <img src="../../assets/img/gx3.png" alt=""> -->
|
||||||
|
<div class="rankHead">
|
||||||
|
<div class="head">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
公务用车
|
||||||
|
</li>
|
||||||
|
<li style="width: 100px;left: 10px;position: relative">
|
||||||
|
生产服务用车
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rank_head_bk">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 344px">
|
||||||
|
<div class="data-tit-bg" style="margin-top: 4%;">车辆使用率较低的单位排名</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li style="width: 50px"></li>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>单位名称</li>
|
||||||
|
<li>车型</li>
|
||||||
|
<li>使用率</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData2" :key="item.id">
|
||||||
|
<li><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.carType}}</li>
|
||||||
|
<li>{{item.useRate}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display:inline-block;position: absolute;
|
<div style="display:inline-block;position: absolute;
|
||||||
left: 72%;">
|
left: 72%;">
|
||||||
<img src="../../assets/img/gx4.png" alt="">
|
<!-- <img src="../../assets/img/gx4.png" alt=""> -->
|
||||||
|
<div class="rankHead">
|
||||||
|
<div class="head">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
公务用车
|
||||||
|
</li>
|
||||||
|
<li style="width: 100px;left: 10px;position: relative">
|
||||||
|
生产服务用车
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rank_head_bk">
|
||||||
|
<div class="data-block-bk mar-top" style="height: 344px">
|
||||||
|
<div class="data-tit-bg" style="margin-top: 4%;">车辆使用率较低的单位排名</div>
|
||||||
|
<!-- <img src="../../assets/img/cb1.png" alt="">-->
|
||||||
|
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
|
||||||
|
<template slot="top">
|
||||||
|
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
|
||||||
|
</template>
|
||||||
|
</BasicBoxCostControl> -->
|
||||||
|
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
|
||||||
|
<div class="list-table">
|
||||||
|
<div class="tb-hd">
|
||||||
|
<ul>
|
||||||
|
<li style="width: 50px"></li>
|
||||||
|
<li>排名</li>
|
||||||
|
<li>单位名称</li>
|
||||||
|
<li>车型</li>
|
||||||
|
<li>使用率</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tb-bd">
|
||||||
|
<ul v-for="item in tableData3" :key="item.id">
|
||||||
|
<li><img :src="item.rank"/></li>
|
||||||
|
<li>{{item.id}}</li>
|
||||||
|
<li>{{item.name}}</li>
|
||||||
|
<li>{{item.carType}}</li>
|
||||||
|
<li>{{item.useRate}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -192,7 +405,137 @@ export default {
|
||||||
dateWeek: null,
|
dateWeek: null,
|
||||||
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||||
decorationColor: ["#568aea", "#000000"],
|
decorationColor: ["#568aea", "#000000"],
|
||||||
|
tableData:[
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
carType:'小车型',
|
||||||
|
ageAvg:'15年',
|
||||||
|
mileAvg:'400000公里',
|
||||||
|
repairAvg:'5478963元',
|
||||||
|
renRate:'10%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:2,
|
||||||
|
carType:'MPV',
|
||||||
|
ageAvg:'15年',
|
||||||
|
mileAvg:'400000公里',
|
||||||
|
repairAvg:'5478963元',
|
||||||
|
renRate:'20%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:3,
|
||||||
|
carType:'考斯特',
|
||||||
|
ageAvg:'15年',
|
||||||
|
mileAvg:'400000公里',
|
||||||
|
repairAvg:'5478963元',
|
||||||
|
renRate:'5%'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tableData1:[
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm1.png'),
|
||||||
|
id:'1',
|
||||||
|
name:'南京市供电公司',
|
||||||
|
carType:'小型车',
|
||||||
|
useRate:'30%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm2.png'),
|
||||||
|
id:'2',
|
||||||
|
name:'徐州市供电公司',
|
||||||
|
carType:'MPV',
|
||||||
|
useRate:'17%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm3.png'),
|
||||||
|
id:'3',
|
||||||
|
name:'无锡市供电公司',
|
||||||
|
carType:'考斯特',
|
||||||
|
useRate:'12%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'4',
|
||||||
|
name:'扬州市供电公司',
|
||||||
|
carType:'小型车',
|
||||||
|
useRate:'10%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'5',
|
||||||
|
name:'南通市供电公司',
|
||||||
|
carType:'MPV',
|
||||||
|
useRate:'9%',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData2:[
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm1.png'),
|
||||||
|
id:'1',
|
||||||
|
name:'扬州市供电公司',
|
||||||
|
carType:'考斯特',
|
||||||
|
useRate:'26%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm2.png'),
|
||||||
|
id:'2',
|
||||||
|
name:'徐州市供电公司',
|
||||||
|
carType:'小型车',
|
||||||
|
useRate:'20%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm3.png'),
|
||||||
|
id:'3',
|
||||||
|
name:'南京市供电公司',
|
||||||
|
carType:'MPV',
|
||||||
|
useRate:'10%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'4',
|
||||||
|
name:'无锡市供电公司',
|
||||||
|
carType:'考斯特',
|
||||||
|
useRate:'5%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'5',
|
||||||
|
name:'南通市供电公司',
|
||||||
|
carType:'小型车',
|
||||||
|
useRate:'4%',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData3:[
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm1.png'),
|
||||||
|
id:'1',
|
||||||
|
name:'无锡市供电公司',
|
||||||
|
carType:'MPV',
|
||||||
|
useRate:'30%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm2.png'),
|
||||||
|
id:'2',
|
||||||
|
name:'南京市供电公司',
|
||||||
|
carType:'考斯特',
|
||||||
|
useRate:'17%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rank:require('../../assets/carTravel/pm3.png'),
|
||||||
|
id:'3',
|
||||||
|
name:'南通市供电公司',
|
||||||
|
carType:'小型车',
|
||||||
|
useRate:'12%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'4',
|
||||||
|
name:'徐州市供电公司',
|
||||||
|
carType:'MPV',
|
||||||
|
useRate:'10%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'5',
|
||||||
|
name:'扬州市供电公司',
|
||||||
|
carType:'小型车',
|
||||||
|
useRate:'9%',
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -308,6 +651,30 @@ left: 63%;
|
||||||
top: 120px;
|
top: 120px;
|
||||||
left: 2%;
|
left: 2%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
.leftHeader{
|
||||||
|
width: 34%;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
left: 2%;
|
||||||
|
.head{
|
||||||
|
width: 100%;
|
||||||
|
li{
|
||||||
|
float: left;
|
||||||
|
width: 22%;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
background: url(../../assets/carTravel/touch.png) no-repeat;
|
||||||
|
color: #8ec1d8;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
li:hover{
|
||||||
|
color: #25dff4;
|
||||||
|
background: url(../../assets/carTravel/touch_hot.png) no-repeat;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.rightTravel{
|
.rightTravel{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -851,4 +1218,143 @@ height:50%
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "../../assets/scss/index.scss";
|
@import "../../assets/scss/index.scss";
|
||||||
|
.data-block-bk {
|
||||||
|
border: 2px solid #29a3d3a1;
|
||||||
|
// background: #11223289;
|
||||||
|
background: rgba(16,29,37,0.8);
|
||||||
|
margin-top: 6.1%;
|
||||||
|
width: 638px;
|
||||||
|
.data-tit-bg {
|
||||||
|
width: 600px;
|
||||||
|
height: 38px;
|
||||||
|
line-height: 38px;
|
||||||
|
padding-left: 50px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
background: -15px url(../../assets/tit.png) no-repeat;
|
||||||
|
// background-size: contain;
|
||||||
|
background-size: 100% 30px;
|
||||||
|
color: #8ec1d8;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.data-flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list-table {
|
||||||
|
.tb-hd,
|
||||||
|
.tb-bd {
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 100%;
|
||||||
|
height: 35px;
|
||||||
|
color: #a6d3e8;
|
||||||
|
li {
|
||||||
|
flex: 0.5;
|
||||||
|
line-height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
&:first-child {
|
||||||
|
flex: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tb-hd {
|
||||||
|
ul {
|
||||||
|
background-color: rgba(14, 45, 66);
|
||||||
|
color: #65c1f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tb-bd {
|
||||||
|
ul {
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rankHead{
|
||||||
|
.head{
|
||||||
|
width: 100%;
|
||||||
|
li{
|
||||||
|
float: left;
|
||||||
|
width: 17%;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
background: url(../../assets/carTravel/touch.png) no-repeat;
|
||||||
|
color: #8ec1d8;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
li:hover{
|
||||||
|
color: #25dff4;
|
||||||
|
background: url(../../assets/carTravel/touch_hot.png) no-repeat;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rank_head_bk{
|
||||||
|
width: 454px;
|
||||||
|
.data-block-bk {
|
||||||
|
border: 2px solid #29a3d3a1;
|
||||||
|
// background: #11223289;
|
||||||
|
background: rgba(16,29,37,0.8);
|
||||||
|
margin-top: 9%;
|
||||||
|
width: 454px;
|
||||||
|
.data-tit-bg {
|
||||||
|
width: 454px;
|
||||||
|
height: 38px;
|
||||||
|
line-height: 38px;
|
||||||
|
padding-left: 50px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
background: -15px url(../../assets/tit.png) no-repeat;
|
||||||
|
// background-size: contain;
|
||||||
|
background-size: 100% 30px;
|
||||||
|
color: #8ec1d8;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.data-flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
.list-table {
|
||||||
|
.tb-hd,
|
||||||
|
.tb-bd {
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 101%;
|
||||||
|
height: 44px;
|
||||||
|
color: #a6d3e8;
|
||||||
|
li {
|
||||||
|
flex: 0.5;
|
||||||
|
line-height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
&:first-child {
|
||||||
|
flex: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tb-hd {
|
||||||
|
ul {
|
||||||
|
background-color: rgba(14, 45, 66);
|
||||||
|
color: #65c1f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tb-bd {
|
||||||
|
ul {
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -152,8 +152,8 @@
|
||||||
</div>
|
</div>
|
||||||
<p>车辆管理</p>
|
<p>车辆管理</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="baseBlock fire" @click="goPage(2)"> -->
|
<div class="baseBlock fire" @click="goPage(2)">
|
||||||
<div class="baseBlock fire">
|
<!-- <div class="baseBlock fire">-->
|
||||||
<p>消防安全</p>
|
<p>消防安全</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="baseBlock quanjing" @click="goPage(9)">
|
<div class="baseBlock quanjing" @click="goPage(9)">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue