引入地图模型
This commit is contained in:
徐克
parent
196a3d8d87
commit
7c0907d554
Binary file not shown.
|
After Width: | Height: | Size: 933 B |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 566 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1008 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -267,7 +267,26 @@ const routes = [{
|
||||||
component: () =>
|
component: () =>
|
||||||
import ('../views/green/index.vue'),
|
import ('../views/green/index.vue'),
|
||||||
}],
|
}],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/build',
|
||||||
|
meta: {
|
||||||
|
title: '国网江苏省电力有限公司'
|
||||||
|
},
|
||||||
|
component: {
|
||||||
|
render: (e) => e("router-view")
|
||||||
|
},
|
||||||
|
children: [{
|
||||||
|
path: '',
|
||||||
|
name: 'build',
|
||||||
|
meta: {
|
||||||
|
title: '国网江苏省电力有限公司'
|
||||||
|
},
|
||||||
|
component: () =>
|
||||||
|
import ('../views/land/unity/unityDemo'),
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
]
|
]
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
routes
|
routes
|
||||||
|
|
|
||||||
|
|
@ -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: {
|
||||||
|
|
@ -188,7 +569,7 @@ export default {
|
||||||
this.$router.push("/carTravel/costControl");
|
this.$router.push("/carTravel/costControl");
|
||||||
}else if(val === 'gxpg'){
|
}else if(val === 'gxpg'){
|
||||||
console.log('跳传更新评估')
|
console.log('跳传更新评估')
|
||||||
this.$router.push("/carTravel/updateAssessment");
|
this.$router.push("/carTravel/updateAssessment");
|
||||||
}else if(val === 'gjjg'){
|
}else if(val === 'gjjg'){
|
||||||
console.log('跳传轨迹监管')
|
console.log('跳传轨迹监管')
|
||||||
this.$router.push("/carTravel/trajectoryRegulation");
|
this.$router.push("/carTravel/trajectoryRegulation");
|
||||||
|
|
@ -204,55 +585,55 @@ this.$router.push("/carTravel/updateAssessment");
|
||||||
.bg{
|
.bg{
|
||||||
background-color:#0d131f;
|
background-color:#0d131f;
|
||||||
}
|
}
|
||||||
.build{
|
.build{
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 63%;
|
left: 63%;
|
||||||
}
|
}
|
||||||
.headCbgg{
|
.headCbgg{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 101px;
|
width: 101px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 16%;
|
left: 16%;
|
||||||
}
|
}
|
||||||
.headGxpg{
|
.headGxpg{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 101px;
|
width: 101px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 66%;
|
left: 66%;
|
||||||
}
|
}
|
||||||
.headGjjg{
|
.headGjjg{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 101px;
|
width: 101px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 84%;
|
left: 84%;
|
||||||
}
|
}
|
||||||
.headzygk{
|
.headzygk{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 101px;
|
width: 101px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// left: 66%;
|
// left: 66%;
|
||||||
}
|
}
|
||||||
.headerButton{
|
.headerButton{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 32%;
|
left: 32%;
|
||||||
top: 37px;
|
top: 37px;
|
||||||
width: 682px;
|
width: 682px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
background: url("../../assets/carTravel/head_cbgg.png") no-repeat;
|
background: url("../../assets/carTravel/head_cbgg.png") no-repeat;
|
||||||
}
|
}
|
||||||
.leftTravel{
|
.leftTravel{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 2%;
|
left: 2%;
|
||||||
}
|
}
|
||||||
.rightTravel{
|
.rightTravel{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1%;
|
right: 1%;
|
||||||
}
|
}
|
||||||
.middle {
|
.middle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 34%;
|
left: 34%;
|
||||||
/* 搜索框 */
|
/* 搜索框 */
|
||||||
|
|
@ -347,9 +728,9 @@ left: 63%;
|
||||||
top: 650px;
|
top: 650px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
/* 返回按钮 */
|
/* 返回按钮 */
|
||||||
.back-button a {
|
.back-button a {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 21px;
|
right: 21px;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
|
|
@ -359,11 +740,11 @@ left: 63%;
|
||||||
border: 0;
|
border: 0;
|
||||||
background-image: url(../../assets/back.png);
|
background-image: url(../../assets/back.png);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.back-button a:hover {
|
.back-button a:hover {
|
||||||
background-image: url(../../assets/back-highlight.png);
|
background-image: url(../../assets/back-highlight.png);
|
||||||
}
|
}
|
||||||
.footer-nav {
|
.footer-nav {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -20px;
|
bottom: -20px;
|
||||||
left: 48%;
|
left: 48%;
|
||||||
|
|
@ -412,9 +793,67 @@ left: 63%;
|
||||||
background: url("../../assets/car/6len03.png") no-repeat;
|
background: url("../../assets/car/6len03.png") no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</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: {
|
||||||
|
|
@ -222,7 +706,7 @@ export default {
|
||||||
if(val === 'cb') {
|
if(val === 'cb') {
|
||||||
this.$router.push("/carTravel/costControl");
|
this.$router.push("/carTravel/costControl");
|
||||||
}else if(val === 'gxpg'){
|
}else if(val === 'gxpg'){
|
||||||
this.$router.push("/carTravel/updateAssessment");
|
this.$router.push("/carTravel/updateAssessment");
|
||||||
}else if(val === 'gjjg'){
|
}else if(val === 'gjjg'){
|
||||||
this.$router.push("/carTravel/trajectoryRegulation");
|
this.$router.push("/carTravel/trajectoryRegulation");
|
||||||
}else{
|
}else{
|
||||||
|
|
@ -244,19 +728,19 @@ this.$router.push("/carTravel/updateAssessment");
|
||||||
.bg{
|
.bg{
|
||||||
background-color:#0d131f;
|
background-color:#0d131f;
|
||||||
}
|
}
|
||||||
.build{
|
.build{
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 63%;
|
left: 63%;
|
||||||
}
|
}
|
||||||
.top{
|
.top{
|
||||||
width: 1840px;
|
width: 1840px;
|
||||||
height: 250px;
|
height: 250px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 115px;
|
top: 115px;
|
||||||
left: 38px;
|
left: 38px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topLeft{
|
.topLeft{
|
||||||
width: 50%;
|
width: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 319px;
|
height: 319px;
|
||||||
|
|
@ -301,8 +785,8 @@ left: 63%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.topRight{
|
.topRight{
|
||||||
width: 50%;
|
width: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left:50%;
|
left:50%;
|
||||||
|
|
@ -359,72 +843,72 @@ left: 63%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// .main {
|
// .main {
|
||||||
// display: flex;
|
// display: flex;
|
||||||
// flex-direction: column;
|
// flex-direction: column;
|
||||||
// justify-content: space-between;
|
// justify-content: space-between;
|
||||||
// width: 800px;
|
// width: 800px;
|
||||||
// height: 462px;
|
// height: 462px;
|
||||||
// padding: 30px 20px;
|
// padding: 30px 20px;
|
||||||
// background: url(../../assets/borad-bg.png) no-repeat;
|
// background: url(../../assets/borad-bg.png) no-repeat;
|
||||||
// background-size: 800px 450px;
|
// background-size: 800px 450px;
|
||||||
|
|
||||||
// }
|
// }
|
||||||
.bottom{
|
.bottom{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 395px;
|
top: 395px;
|
||||||
left: 38px;
|
left: 38px;
|
||||||
width: 1840px;
|
width: 1840px;
|
||||||
}
|
}
|
||||||
.bottom li{
|
.bottom li{
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.headzygk{
|
.headzygk{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 101px;
|
width: 101px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// left: 66%;
|
// left: 66%;
|
||||||
}
|
}
|
||||||
.headCbgg{
|
.headCbgg{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 101px;
|
width: 101px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 16%;
|
left: 16%;
|
||||||
}
|
}
|
||||||
.headGxpg{
|
.headGxpg{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 101px;
|
width: 101px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 66%;
|
left: 66%;
|
||||||
}
|
}
|
||||||
.headGjjg{
|
.headGjjg{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 101px;
|
width: 101px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 84%;
|
left: 84%;
|
||||||
}
|
}
|
||||||
.headerButton{
|
.headerButton{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 32%;
|
left: 32%;
|
||||||
top: 37px;
|
top: 37px;
|
||||||
width: 682px;
|
width: 682px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
background: url("../../assets/carTravel/head_gjjg.png") no-repeat;
|
background: url("../../assets/carTravel/head_gjjg.png") no-repeat;
|
||||||
}
|
}
|
||||||
.leftTravel{
|
.leftTravel{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 2%;
|
left: 2%;
|
||||||
}
|
}
|
||||||
.rightTravel{
|
.rightTravel{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 35%;
|
right: 35%;
|
||||||
}
|
}
|
||||||
.middle {
|
.middle {
|
||||||
/* 搜索框 */
|
/* 搜索框 */
|
||||||
.search-middle {
|
.search-middle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -517,9 +1001,9 @@ left: 63%;
|
||||||
top: 650px;
|
top: 650px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
/* 返回按钮 */
|
/* 返回按钮 */
|
||||||
.back-button a {
|
.back-button a {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 21px;
|
right: 21px;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
|
|
@ -529,11 +1013,11 @@ left: 63%;
|
||||||
border: 0;
|
border: 0;
|
||||||
background-image: url(../../assets/back.png);
|
background-image: url(../../assets/back.png);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.back-button a:hover {
|
.back-button a:hover {
|
||||||
background-image: url(../../assets/back-highlight.png);
|
background-image: url(../../assets/back-highlight.png);
|
||||||
}
|
}
|
||||||
.footer-nav {
|
.footer-nav {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -20px;
|
bottom: -20px;
|
||||||
left: 48%;
|
left: 48%;
|
||||||
|
|
@ -582,9 +1066,129 @@ left: 63%;
|
||||||
background: url("../../assets/car/6len03.png") no-repeat;
|
background: url("../../assets/car/6len03.png") no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</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: {
|
||||||
|
|
@ -247,7 +590,7 @@ export default {
|
||||||
this.$router.push("/carTravel/costControl");
|
this.$router.push("/carTravel/costControl");
|
||||||
}else if(val === 'gxpg'){
|
}else if(val === 'gxpg'){
|
||||||
console.log('跳传更新评估')
|
console.log('跳传更新评估')
|
||||||
this.$router.push("/carTravel/updateAssessment");
|
this.$router.push("/carTravel/updateAssessment");
|
||||||
}else if(val === 'gjjg'){
|
}else if(val === 'gjjg'){
|
||||||
console.log('跳传轨迹监管')
|
console.log('跳传轨迹监管')
|
||||||
this.$router.push("/carTravel/trajectoryRegulation");
|
this.$router.push("/carTravel/trajectoryRegulation");
|
||||||
|
|
@ -263,63 +606,87 @@ this.$router.push("/carTravel/updateAssessment");
|
||||||
.bg{
|
.bg{
|
||||||
background-color:#0d131f;
|
background-color:#0d131f;
|
||||||
}
|
}
|
||||||
.build{
|
.build{
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 63%;
|
left: 63%;
|
||||||
}
|
}
|
||||||
.headCbgg{
|
.headCbgg{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 101px;
|
width: 101px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 16%;
|
left: 16%;
|
||||||
}
|
}
|
||||||
.headzygk{
|
.headzygk{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 101px;
|
width: 101px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// left: 66%;
|
// left: 66%;
|
||||||
}
|
}
|
||||||
.headGjjg{
|
.headGjjg{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 101px;
|
width: 101px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 84%;
|
left: 84%;
|
||||||
}
|
}
|
||||||
.bottom{
|
.bottom{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
/* margin-top: 10px; */
|
/* margin-top: 10px; */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 60%;
|
top: 60%;
|
||||||
left: 2%;
|
left: 2%;
|
||||||
}
|
}
|
||||||
.headerButton{
|
.headerButton{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 32%;
|
left: 32%;
|
||||||
top: 37px;
|
top: 37px;
|
||||||
width: 682px;
|
width: 682px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
background: url("../../assets/carTravel/head_gxpg.png") no-repeat;
|
background: url("../../assets/carTravel/head_gxpg.png") no-repeat;
|
||||||
}
|
}
|
||||||
.leftTravel{
|
.leftTravel{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
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;
|
||||||
}
|
}
|
||||||
.rightTravel{
|
li:hover{
|
||||||
|
color: #25dff4;
|
||||||
|
background: url(../../assets/carTravel/touch_hot.png) no-repeat;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rightTravel{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 35%;
|
right: 35%;
|
||||||
}
|
}
|
||||||
.img{
|
.img{
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
width:40%
|
width:40%
|
||||||
}
|
}
|
||||||
.bingimg{
|
.bingimg{
|
||||||
width: 24%;display: inline-block;position: absolute;left:36%;
|
width: 24%;display: inline-block;position: absolute;left:36%;
|
||||||
.head{
|
.head{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
li{
|
li{
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -336,11 +703,11 @@ width: 24%;display: inline-block;position: absolute;left:36%;
|
||||||
background: url(../../assets/carTravel/touch_hot.png) no-repeat;
|
background: url(../../assets/carTravel/touch_hot.png) no-repeat;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.dwcl{
|
}
|
||||||
width: 24%;display: inline-block;
|
.dwcl{
|
||||||
.head{
|
width: 24%;display: inline-block;
|
||||||
|
.head{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
li{
|
li{
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -357,7 +724,7 @@ width: 24%;display: inline-block;
|
||||||
background: url(../../assets/carTravel/touch_hot.png) no-repeat;
|
background: url(../../assets/carTravel/touch_hot.png) no-repeat;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.leftmiddle {
|
.leftmiddle {
|
||||||
.main {
|
.main {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -372,13 +739,13 @@ width: 24%;display: inline-block;
|
||||||
padding: 30px 20px;
|
padding: 30px 20px;
|
||||||
background: url(../../assets/borad-bg.png) no-repeat;
|
background: url(../../assets/borad-bg.png) no-repeat;
|
||||||
background-size: 450px 350px;
|
background-size: 450px 350px;
|
||||||
.mainTop{
|
.mainTop{
|
||||||
height:50%
|
height:50%
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainBottom{
|
.mainBottom{
|
||||||
height:50%
|
height:50%
|
||||||
}
|
}
|
||||||
.main-title {
|
.main-title {
|
||||||
// width: 542px;
|
// width: 542px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -432,13 +799,13 @@ height:50%
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.lineimg{
|
.lineimg{
|
||||||
width: 42%;
|
width: 42%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1044px;
|
left: 1044px;
|
||||||
.head{
|
.head{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
li{
|
li{
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -455,9 +822,9 @@ height:50%
|
||||||
background: url(../../assets/carTravel/touch_hot.png) no-repeat;
|
background: url(../../assets/carTravel/touch_hot.png) no-repeat;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.middle {
|
}
|
||||||
|
.middle {
|
||||||
.main {
|
.main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -469,13 +836,13 @@ height:50%
|
||||||
padding: 30px 20px;
|
padding: 30px 20px;
|
||||||
background: url(../../assets/borad-bg.png) no-repeat;
|
background: url(../../assets/borad-bg.png) no-repeat;
|
||||||
background-size: 340px 449px;
|
background-size: 340px 449px;
|
||||||
.mainTop{
|
.mainTop{
|
||||||
height:50%
|
height:50%
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainBottom{
|
.mainBottom{
|
||||||
height:50%
|
height:50%
|
||||||
}
|
}
|
||||||
.main-title {
|
.main-title {
|
||||||
// width: 542px;
|
// width: 542px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -618,8 +985,8 @@ height:50%
|
||||||
top: 650px;
|
top: 650px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.middleRight {
|
.middleRight {
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -632,13 +999,13 @@ height:50%
|
||||||
padding: 30px 20px;
|
padding: 30px 20px;
|
||||||
background: url(../../assets/borad-bg.png) no-repeat;
|
background: url(../../assets/borad-bg.png) no-repeat;
|
||||||
background-size: 800px 450px;
|
background-size: 800px 450px;
|
||||||
// .mainTop{
|
// .mainTop{
|
||||||
// height:50%
|
// height:50%
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// .mainBottom{
|
// .mainBottom{
|
||||||
// height:50%
|
// height:50%
|
||||||
// }
|
// }
|
||||||
.main-title {
|
.main-title {
|
||||||
// width: 542px;
|
// width: 542px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -781,9 +1148,9 @@ height:50%
|
||||||
top: 650px;
|
top: 650px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
/* 返回按钮 */
|
/* 返回按钮 */
|
||||||
.back-button a {
|
.back-button a {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 21px;
|
right: 21px;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
|
|
@ -793,11 +1160,11 @@ height:50%
|
||||||
border: 0;
|
border: 0;
|
||||||
background-image: url(../../assets/back.png);
|
background-image: url(../../assets/back.png);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.back-button a:hover {
|
.back-button a:hover {
|
||||||
background-image: url(../../assets/back-highlight.png);
|
background-image: url(../../assets/back-highlight.png);
|
||||||
}
|
}
|
||||||
.footer-nav {
|
.footer-nav {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -20px;
|
bottom: -20px;
|
||||||
left: 48%;
|
left: 48%;
|
||||||
|
|
@ -846,9 +1213,148 @@ height:50%
|
||||||
background: url("../../assets/car/6len03.png") no-repeat;
|
background: url("../../assets/car/6len03.png") no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</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>
|
||||||
|
|
|
||||||
|
|
@ -3,17 +3,17 @@
|
||||||
<div
|
<div
|
||||||
class="bg"
|
class="bg"
|
||||||
>
|
>
|
||||||
|
<iframe src="/food/foodMap.html" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
||||||
<div class="body-left"></div>
|
<div class="body-left"></div>
|
||||||
<div class="body-right"></div>
|
<div class="body-right"></div>
|
||||||
<div class="body-bottom"></div>
|
<div class="body-bottom"></div>
|
||||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||||
<div v-else class="host-body">
|
<div v-else class="host-body">
|
||||||
<headerIndex :cdata="{ title: '食品安全', margin: '26px auto' }" />
|
<headerIndex :cdata="{ title: '食品安全', margin: '26px auto' }" style="position: relative"/>
|
||||||
|
|
||||||
<div class="body-box">
|
<div class="body-box">
|
||||||
<!-- 第三行数据 -->
|
<!-- 第三行数据 -->
|
||||||
<div class="food-content-box">
|
<div class="food-content-box">
|
||||||
<div style="width:400px">
|
<div style="width:400px" class="left">
|
||||||
<div class="data-block-bk">
|
<div class="data-block-bk">
|
||||||
<div class="data-tit-bg">基地及供应商基本情况</div>
|
<div class="data-tit-bg">基地及供应商基本情况</div>
|
||||||
<div class="data-flex" style="height: 278px;">
|
<div class="data-flex" style="height: 278px;">
|
||||||
|
|
@ -56,98 +56,98 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="position: relative;">
|
<!-- <div style="position: relative;">-->
|
||||||
<!-- 删除 -->
|
<!-- <!– 删除 –>-->
|
||||||
<!-- <div
|
<!-- <!– <div-->
|
||||||
class="center_block c_posi"
|
<!-- class="center_block c_posi"-->
|
||||||
style="top: 47px; left: 100px;"
|
<!-- style="top: 47px; left: 100px;"-->
|
||||||
@click="doGoLink()"
|
<!-- @click="doGoLink()"-->
|
||||||
>
|
<!-- >-->
|
||||||
<div class="cen_block">
|
<!-- <div class="cen_block">-->
|
||||||
<div class="cen_tit">南京厨鲜宝食品基地</div>
|
<!-- <div class="cen_tit">南京厨鲜宝食品基地</div>-->
|
||||||
<div
|
<!-- <div-->
|
||||||
class="cen_bg"
|
<!-- class="cen_bg"-->
|
||||||
:style="{
|
<!-- :style="{-->
|
||||||
backgroundImage:
|
<!-- backgroundImage:-->
|
||||||
'url(' + require(`../assets/foodSafe/pic1.png`) + ')',
|
<!-- 'url(' + require(`../assets/foodSafe/pic1.png`) + ')',-->
|
||||||
}"
|
<!-- }"-->
|
||||||
></div>
|
<!-- ></div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div class="cen_map"></div>
|
<!-- <div class="cen_map"></div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div
|
<!-- <div-->
|
||||||
class="center_block c_posi"
|
<!-- class="center_block c_posi"-->
|
||||||
style="top: 77px; right: 0px;"
|
<!-- style="top: 77px; right: 0px;"-->
|
||||||
@click="doGoLink()"
|
<!-- @click="doGoLink()"-->
|
||||||
>
|
<!-- >-->
|
||||||
<div class="cen_block">
|
<!-- <div class="cen_block">-->
|
||||||
<div class="cen_tit">南京怀来正大食品</div>
|
<!-- <div class="cen_tit">南京怀来正大食品</div>-->
|
||||||
<div
|
<!-- <div-->
|
||||||
class="cen_bg"
|
<!-- class="cen_bg"-->
|
||||||
:style="{
|
<!-- :style="{-->
|
||||||
backgroundImage:
|
<!-- backgroundImage:-->
|
||||||
'url(' + require(`../assets/foodSafe/pic2.png`) + ')',
|
<!-- 'url(' + require(`../assets/foodSafe/pic2.png`) + ')',-->
|
||||||
}"
|
<!-- }"-->
|
||||||
></div>
|
<!-- ></div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div class="cen_map"></div>
|
<!-- <div class="cen_map"></div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div
|
<!-- <div-->
|
||||||
class="center_block c_posi"
|
<!-- class="center_block c_posi"-->
|
||||||
style="bottom: 249px; right: 230px;"
|
<!-- style="bottom: 249px; right: 230px;"-->
|
||||||
@click="doGoLink()"
|
<!-- @click="doGoLink()"-->
|
||||||
>
|
<!-- >-->
|
||||||
<div class="cen_block">
|
<!-- <div class="cen_block">-->
|
||||||
<div class="cen_tit">南京牧龙食品烘焙基地</div>
|
<!-- <div class="cen_tit">南京牧龙食品烘焙基地</div>-->
|
||||||
<div
|
<!-- <div-->
|
||||||
class="cen_bg"
|
<!-- class="cen_bg"-->
|
||||||
:style="{
|
<!-- :style="{-->
|
||||||
backgroundImage:
|
<!-- backgroundImage:-->
|
||||||
'url(' + require(`../assets/foodSafe/pic3.png`) + ')',
|
<!-- 'url(' + require(`../assets/foodSafe/pic3.png`) + ')',-->
|
||||||
}"
|
<!-- }"-->
|
||||||
></div>
|
<!-- ></div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div class="cen_map"></div>
|
<!-- <div class="cen_map"></div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div
|
<!-- <div-->
|
||||||
class="center_block c_posi"
|
<!-- class="center_block c_posi"-->
|
||||||
style="bottom: 50px; left: 12px;"
|
<!-- style="bottom: 50px; left: 12px;"-->
|
||||||
@click="doGoLink()"
|
<!-- @click="doGoLink()"-->
|
||||||
>
|
<!-- >-->
|
||||||
<div class="cen_block">
|
<!-- <div class="cen_block">-->
|
||||||
<div class="cen_tit">江苏润丰股份有限公司</div>
|
<!-- <div class="cen_tit">江苏润丰股份有限公司</div>-->
|
||||||
<div
|
<!-- <div-->
|
||||||
class="cen_bg"
|
<!-- class="cen_bg"-->
|
||||||
:style="{
|
<!-- :style="{-->
|
||||||
backgroundImage:
|
<!-- backgroundImage:-->
|
||||||
'url(' + require(`../assets/foodSafe/pic4.png`) + ')',
|
<!-- 'url(' + require(`../assets/foodSafe/pic4.png`) + ')',-->
|
||||||
}"
|
<!-- }"-->
|
||||||
></div>
|
<!-- ></div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div class="cen_map"></div>
|
<!-- <div class="cen_map"></div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div
|
<!-- <div-->
|
||||||
class="center_block c_posi"
|
<!-- class="center_block c_posi"-->
|
||||||
style="bottom: -76px; right: 65px;"
|
<!-- style="bottom: -76px; right: 65px;"-->
|
||||||
@click="doGoLink()"
|
<!-- @click="doGoLink()"-->
|
||||||
>
|
<!-- >-->
|
||||||
<div class="cen_block">
|
<!-- <div class="cen_block">-->
|
||||||
<div class="cen_tit">南京丰浩华食品供应链</div>
|
<!-- <div class="cen_tit">南京丰浩华食品供应链</div>-->
|
||||||
<div
|
<!-- <div-->
|
||||||
class="cen_bg"
|
<!-- class="cen_bg"-->
|
||||||
:style="{
|
<!-- :style="{-->
|
||||||
backgroundImage:
|
<!-- backgroundImage:-->
|
||||||
'url(' + require(`../assets/foodSafe/pic5.png`) + ')',
|
<!-- 'url(' + require(`../assets/foodSafe/pic5.png`) + ')',-->
|
||||||
}"
|
<!-- }"-->
|
||||||
></div>
|
<!-- ></div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div class="cen_map"></div>
|
<!-- <div class="cen_map"></div>-->
|
||||||
</div> -->
|
<!-- </div> –>-->
|
||||||
<!-- 删除 -->
|
<!-- <!– 删除 –>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
|
|
||||||
<!-- <div style="width:400px"> -->
|
<!-- <div style="width:400px"> -->
|
||||||
<div>
|
<div class="right">
|
||||||
<div class="data-block-bk">
|
<div class="data-block-bk">
|
||||||
<div class="data-tit-bg">关联食堂基本信息</div>
|
<div class="data-tit-bg">关联食堂基本信息</div>
|
||||||
<div class="data-flex">
|
<div class="data-flex">
|
||||||
|
|
@ -774,16 +774,16 @@ export default {
|
||||||
.body-box{
|
.body-box{
|
||||||
margin-top: 0px!important;
|
margin-top: 0px!important;
|
||||||
}
|
}
|
||||||
.food-content-box {
|
//.food-content-box {
|
||||||
display: grid;
|
// display: grid;
|
||||||
grid-template-columns: 2.3fr 5fr 1.8fr;
|
// grid-template-columns: 2.3fr 5fr 1.8fr;
|
||||||
margin: 0 50px;
|
// margin: 0 50px;
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top:140px
|
// top:140px
|
||||||
}
|
//}
|
||||||
.data-block-bk {
|
.data-block-bk {
|
||||||
border: 2px solid #29a3d3a1;
|
border: 2px solid #29a3d3a1;
|
||||||
// background: #11223289;
|
// background: #11223289;
|
||||||
background: rgba(16,29,37,0.8);
|
background: rgba(16,29,37,0.8);
|
||||||
// height: 280px;
|
// height: 280px;
|
||||||
.data-tit-bg {
|
.data-tit-bg {
|
||||||
|
|
@ -963,4 +963,14 @@ $box-width: 300px;
|
||||||
.c_posi {
|
.c_posi {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
.left {
|
||||||
|
width: 24%;
|
||||||
|
left: 2%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 21.5%;
|
||||||
|
right: 2%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,13 @@
|
||||||
<div
|
<div
|
||||||
class="bg"
|
class="bg"
|
||||||
>
|
>
|
||||||
|
<iframe src="/green/greenMap.html" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
||||||
<div class="body-left"></div>
|
<div class="body-left"></div>
|
||||||
<div class="body-right"></div>
|
<div class="body-right"></div>
|
||||||
<div class="body-bottom"></div>
|
<div class="body-bottom"></div>
|
||||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||||
<div v-else class="host-body">
|
<div v-else class="host-body">
|
||||||
<headerIndex :cdata="{ title: '绿色双碳', margin: '26px auto' }" />
|
<headerIndex :cdata="{ title: '绿色双碳', margin: '26px auto' }" style="position: relative"/>
|
||||||
|
|
||||||
<div class="body-box" style="margin-top: -100px;">
|
<div class="body-box" style="margin-top: -100px;">
|
||||||
<!-- 第四行数据 -->
|
<!-- 第四行数据 -->
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,12 @@
|
||||||
<div
|
<div
|
||||||
class="bg"
|
class="bg"
|
||||||
>
|
>
|
||||||
|
<iframe src="/land/landMap.html" frameborder="0" width="100%" height="100%"></iframe>
|
||||||
<div class="body-left"></div>
|
<div class="body-left"></div>
|
||||||
<div class="body-right"></div>
|
<div class="body-right"></div>
|
||||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||||
<div v-else class="host-body">
|
<div v-else class="host-body">
|
||||||
<headerIndex :cdata="{ title: '房地资源', margin: '26px auto' }" />
|
<headerIndex :cdata="{ title: '房地资源', margin: '26px auto' }" style="position: relative"/>
|
||||||
|
|
||||||
<div class="body-box">
|
<div class="body-box">
|
||||||
<!-- 第三行数据 -->
|
<!-- 第三行数据 -->
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,13 @@
|
||||||
'url(' + require(`@/assets/${backgroundPic.index}.png`) + ')',
|
'url(' + require(`@/assets/${backgroundPic.index}.png`) + ')',
|
||||||
}"> -->
|
}"> -->
|
||||||
<div class="bg">
|
<div class="bg">
|
||||||
|
<iframe src="/land/landMap.html" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
||||||
<div class="body-left"></div>
|
<div class="body-left"></div>
|
||||||
<div class="body-right"></div>
|
<div class="body-right"></div>
|
||||||
<div class="body-bottom"></div>
|
<div class="body-bottom"></div>
|
||||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||||
<div v-else class="host-body">
|
<div v-else class="host-body">
|
||||||
<HeaderIndex :cdata="{ title: '房地资源', margin: '26px auto' }" />
|
<HeaderIndex :cdata="{ title: '房地资源', margin: '26px auto' }" style="position: relative"/>
|
||||||
<div class="main" style="margin-top:-80px">
|
<div class="main" style="margin-top:-80px">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<h1>基础数据展示</h1>
|
<h1>基础数据展示</h1>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,14 @@
|
||||||
'url(' + require(`../../assets/${backgroundPic.index}.png`) + ')',
|
'url(' + require(`../../assets/${backgroundPic.index}.png`) + ')',
|
||||||
}"> -->
|
}"> -->
|
||||||
<div class="bg">
|
<div class="bg">
|
||||||
|
<iframe src="/land/landMap.html"
|
||||||
|
name="myframe"
|
||||||
|
frameborder="0"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
style="position: absolute"
|
||||||
|
ref="iframe"
|
||||||
|
></iframe>
|
||||||
<div class="body-left"></div>
|
<div class="body-left"></div>
|
||||||
<div class="body-right"></div>
|
<div class="body-right"></div>
|
||||||
<div class="body-bottom"></div>
|
<div class="body-bottom"></div>
|
||||||
|
|
@ -14,12 +22,12 @@
|
||||||
<div class="back-button">
|
<div class="back-button">
|
||||||
<a href="#" @click="goPage(0)"></a>
|
<a href="#" @click="goPage(0)"></a>
|
||||||
</div>
|
</div>
|
||||||
<headerIndex :cdata="{ title: '房地资源', margin: '26px auto' }" />
|
<headerIndex :cdata="{ title: '房地资源', margin: '26px auto' }" style="position: relative" />
|
||||||
<div class="main" style="margin-top:-100px">
|
<div class="main" style="margin-top:-100px">
|
||||||
|
|
||||||
|
|
||||||
<!-- <div class="d3" @click="go('landChild')">江苏省高校招生就业指导服务中心</div> -->
|
<!-- <div class="d3" @click="go('landChild')">江苏省高校招生就业指导服务中心</div> -->
|
||||||
<div class="left">
|
<div class="leftModel">
|
||||||
<BasicBox title="房地资源展示" :dataSource="false">
|
<BasicBox title="房地资源展示" :dataSource="false">
|
||||||
<template slot="top">
|
<template slot="top">
|
||||||
<div class="informationOverview" v-for="(item, index) in imgList" :key="index">
|
<div class="informationOverview" v-for="(item, index) in imgList" :key="index">
|
||||||
|
|
@ -39,7 +47,13 @@
|
||||||
" :style="{ height: '200px', padding: '10px',overflow:hidden, }"></CustomDvScrollBoard>
|
" :style="{ height: '200px', padding: '10px',overflow:hidden, }"></CustomDvScrollBoard>
|
||||||
</template>
|
</template>
|
||||||
</BasicBox>
|
</BasicBox>
|
||||||
|
<!-- <BasicBox title="宗地资源规划用途清单" :dataSource="false">-->
|
||||||
|
<!-- <template slot="top">-->
|
||||||
|
<!-- <CustomDvScrollBoard :config="config1-->
|
||||||
|
|
||||||
|
<!-- " :style="{ height: '200px', padding: '10px' }"></CustomDvScrollBoard>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- </BasicBox>-->
|
||||||
<BasicBox title="宗地资源规划用途清单" :dataSource="false">
|
<BasicBox title="宗地资源规划用途清单" :dataSource="false">
|
||||||
<template slot="top">
|
<template slot="top">
|
||||||
<CustomDvScrollBoard1 :config="config1
|
<CustomDvScrollBoard1 :config="config1
|
||||||
|
|
@ -56,7 +70,7 @@
|
||||||
<p>{{ item.title }}</p>
|
<p>{{ item.title }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="rightModel">
|
||||||
<BasicBox title="房产资源展示" :dataSource="false">
|
<BasicBox title="房产资源展示" :dataSource="false">
|
||||||
<template slot="top">
|
<template slot="top">
|
||||||
<div class="panelBox">
|
<div class="panelBox">
|
||||||
|
|
@ -134,6 +148,7 @@ export default {
|
||||||
mixins: [drawMixin],
|
mixins: [drawMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
cityName:'',
|
||||||
nanj:true,
|
nanj:true,
|
||||||
landC:false,
|
landC:false,
|
||||||
backgroundPic: {
|
backgroundPic: {
|
||||||
|
|
@ -145,10 +160,10 @@ export default {
|
||||||
{ imgUrl: require("@/assets/landRes/land_area.png"), count: 4499759.42, title: "全省宗地面积" },
|
{ imgUrl: require("@/assets/landRes/land_area.png"), count: 4499759.42, title: "全省宗地面积" },
|
||||||
{ imgUrl: require("@/assets/landRes/amount.png"), count: 1779, title: "全省房产数量" },
|
{ imgUrl: require("@/assets/landRes/amount.png"), count: 1779, title: "全省房产数量" },
|
||||||
{ imgUrl: require("@/assets/landRes/estate_area.png"), count: 2970888.91, title: "全省房产面积" },],
|
{ imgUrl: require("@/assets/landRes/estate_area.png"), count: 2970888.91, title: "全省房产面积" },],
|
||||||
nanjing:[{ imgUrl: require("@/assets/landRes/land_logo.png"), count: 126, title: "南京市宗地数量" },
|
nanjing:[{ imgUrl: require("@/assets/landRes/land_logo.png"), count: 1136, title: "南京市宗地数量" },
|
||||||
{ imgUrl: require("@/assets/landRes/land_area.png"), count: 278395.34, title: "南京市宗地面积" },
|
{ imgUrl: require("@/assets/landRes/land_area.png"), count: 4499759.42, title: "南京市宗地面积" },
|
||||||
{ imgUrl: require("@/assets/landRes/amount.png"), count: 145, title: "南京市房产数量" },
|
{ imgUrl: require("@/assets/landRes/amount.png"), count: 1779, title: "南京市房产数量" },
|
||||||
{ imgUrl: require("@/assets/landRes/estate_area.png"), count: 212423.28, title: "南京市房产面积" },],
|
{ imgUrl: require("@/assets/landRes/estate_area.png"), count: 2970888.91, title: "南京市房产面积" },],
|
||||||
zhengjiang:[{ imgUrl: require("@/assets/landRes/land_logo.png"), count: 1136, title: "南京市宗地数量" },
|
zhengjiang:[{ imgUrl: require("@/assets/landRes/land_logo.png"), count: 1136, title: "南京市宗地数量" },
|
||||||
{ imgUrl: require("@/assets/landRes/land_area.png"), count: 4499759.42, title: "南京市宗地面积" },
|
{ imgUrl: require("@/assets/landRes/land_area.png"), count: 4499759.42, title: "南京市宗地面积" },
|
||||||
{ imgUrl: require("@/assets/landRes/amount.png"), count: 1779, title: "南京市房产数量" },
|
{ imgUrl: require("@/assets/landRes/amount.png"), count: 1779, title: "南京市房产数量" },
|
||||||
|
|
@ -189,31 +204,24 @@ export default {
|
||||||
nanjing: {
|
nanjing: {
|
||||||
// header:['规划用途', '南京数量', '南京占比'],
|
// header:['规划用途', '南京数量', '南京占比'],
|
||||||
data:
|
data:
|
||||||
// [['机关单位用地', '1', '0.15%'],
|
[['机关单位用地', '1', '0.15%'],
|
||||||
// ['城镇单一住宅', '1', '0.15%'],
|
['城镇单一住宅', '1', '0.15%'],
|
||||||
// ['仓储用地', '5', '0.36%'],
|
['仓储用地', '5', '0.36%'],
|
||||||
// ['住宅用地', '2', '0.15%'],
|
['住宅用地', '2', '0.15%'],
|
||||||
// ['市政公共', '1', '0.07%'],
|
['市政公共', '1', '0.07%'],
|
||||||
// ['物流仓储用地', '16', '1.17%'],
|
['物流仓储用地', '16', '1.17%'],
|
||||||
// ['非独栋居住用地', '341', '24.87%'],
|
['非独栋居住用地', '341', '24.87%'],
|
||||||
// ['绿地与广场用地', '1', '0.07%'],
|
['绿地与广场用地', '1', '0.07%'],
|
||||||
// ['城镇混合住宅', '1', '0.07%'],
|
['城镇混合住宅', '1', '0.07%'],
|
||||||
// ['城镇住宅用地', '40', '2.92%'],
|
['城镇住宅用地', '40', '2.92%'],
|
||||||
// ['公共管理与公共服务设施用地', '90', '6.56%'],
|
['公共管理与公共服务设施用地', '90', '6.56%'],
|
||||||
// ['公用设施用地', '119', '8.68%'],
|
['公用设施用地', '119', '8.68%'],
|
||||||
// ['工业用地', '41', '2.99%'],
|
['工业用地', '41', '2.99%'],
|
||||||
// ['商业服务设施用地', '98', '7.15%'],
|
['商业服务设施用地', '98', '7.15%'],
|
||||||
// ['建设用地', '49', '3.57%'],
|
['建设用地', '49', '3.57%'],
|
||||||
// ['商服用地', '2', '0.15%'],
|
['商服用地', '2', '0.15%'],
|
||||||
// ['其他商服用地', '1', '0.07%'],
|
['其他商服用地', '1', '0.07%'],
|
||||||
// ['居住用地', '560', '40.85%'],]
|
['居住用地', '560', '40.85%'],]},
|
||||||
//
|
|
||||||
[
|
|
||||||
['公用设施用地', '10', '7.94%'],
|
|
||||||
['工业用地', '4', '3.17%'],
|
|
||||||
['商业服务设施用地', '36', '28.57%'],
|
|
||||||
]
|
|
||||||
},
|
|
||||||
zhengjiang:{
|
zhengjiang:{
|
||||||
header:['规划用途', '全省数量', '全省占比'],
|
header:['规划用途', '全省数量', '全省占比'],
|
||||||
data:[['机关单位用地', '2', '0.15%'],
|
data:[['机关单位用地', '2', '0.15%'],
|
||||||
|
|
@ -282,16 +290,14 @@ export default {
|
||||||
// [['2019', '2', '16.67%'],
|
// [['2019', '2', '16.67%'],
|
||||||
// ['2021', '2', '16.67%'],
|
// ['2021', '2', '16.67%'],
|
||||||
// ['2022', '5', '66.67%'],['无', '无', '无'],]
|
// ['2022', '5', '66.67%'],['无', '无', '无'],]
|
||||||
[
|
[['1950-1959', '4', '0.29%'],
|
||||||
// ['1950-1959', '4', '0.29%'],
|
['1960-1969', '1', '0.07%'],
|
||||||
// ['1960-1969', '1', '0.07%'],
|
['1970-1979', '12', '0.87%'],
|
||||||
// ['1970-1979', '12', '0.87%'],
|
['1980-1989', '138', '10.01%'],
|
||||||
// ['1980-1989', '138', '10.01%'],
|
['1990-1999', '144', '10.45%'],
|
||||||
// ['1990-1999', '144', '10.45%'],
|
['2000-2009', '669', '48.55%'],
|
||||||
// ['2000-2009', '669', '48.55%'],
|
['2010-2019', '370', '26.85%'],
|
||||||
// ['2010-2019', '370', '26.85%'],
|
['2020-2029', '40', '2.9%'],
|
||||||
// ['2020-2029', '40', '2.9%'],
|
|
||||||
['2022', '3', '100%'],
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
levelConfigData:{nanjing:{data: [0],}},
|
levelConfigData:{nanjing:{data: [0],}},
|
||||||
|
|
@ -452,8 +458,9 @@ export default {
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.cancelLoading();
|
this.cancelLoading();
|
||||||
this.initWebSocket ();
|
this.initWebSocket();
|
||||||
this.go( 'nanjing')
|
window.addEventListener("message", this.handleMessage);
|
||||||
|
this.go('nanjing')
|
||||||
},
|
},
|
||||||
sockets:{
|
sockets:{
|
||||||
connect(){
|
connect(){
|
||||||
|
|
@ -477,7 +484,7 @@ export default {
|
||||||
// socketRefs=newVal
|
// socketRefs=newVal
|
||||||
console.log("newVal", newVal)
|
console.log("newVal", newVal)
|
||||||
// console.log("oldVal", oldVal)
|
// console.log("oldVal", oldVal)
|
||||||
if(newVal=='nanjing'){
|
if(newVal== 'nanjing'){
|
||||||
this.imgList=this.imgListData.nanjing
|
this.imgList=this.imgListData.nanjing
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -603,7 +610,24 @@ export default {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
}, 500);
|
}, 500);
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* 动态传输城市名称
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
handleMessage(event) {
|
||||||
|
// 获取从iframe页面中传过来的值
|
||||||
|
// var cmd = event.data.cmd;
|
||||||
|
this.cityName = event.data.params;
|
||||||
},
|
},
|
||||||
|
build(){
|
||||||
|
this.$router.push('/build')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
window['vueDefinedMyProp'] = build =>{
|
||||||
|
this.build()
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
@ -614,7 +638,7 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
.back-button a {
|
.back-button a {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 21px;
|
right: 21px;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
|
|
@ -624,11 +648,11 @@ export default {
|
||||||
border: 0;
|
border: 0;
|
||||||
background-image: url(../../assets/back.png);
|
background-image: url(../../assets/back.png);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.back-button a:hover {
|
.back-button a:hover {
|
||||||
background-image: url(../../assets/back-highlight.png);
|
background-image: url(../../assets/back-highlight.png);
|
||||||
}
|
}
|
||||||
.body-left{
|
.body-left{
|
||||||
background: url('../../assets/left.png') no-repeat!important;
|
background: url('../../assets/left.png') no-repeat!important;
|
||||||
}
|
}
|
||||||
.body-right{
|
.body-right{
|
||||||
|
|
@ -749,11 +773,13 @@ export default {
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
width: 41%;
|
width: 41%;
|
||||||
|
height: 20%;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-content: flex-start;
|
align-content: flex-start;
|
||||||
|
position: relative;
|
||||||
|
left:30%;
|
||||||
.box {
|
.box {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
// background: #11223289;
|
// background: #11223289;
|
||||||
|
|
@ -824,13 +850,135 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
//.main {
|
||||||
|
// display: flex;
|
||||||
|
// position: relative;
|
||||||
|
// overflow: hidden;
|
||||||
|
// justify-content: space-between;
|
||||||
|
//
|
||||||
|
// .d1 {
|
||||||
|
// // position: absolute;
|
||||||
|
// // left: 830px;
|
||||||
|
// // top: 395px;
|
||||||
|
// // left: 15px;
|
||||||
|
// // top: 395px;
|
||||||
|
// width: 154px;
|
||||||
|
// height: 53px;
|
||||||
|
// line-height: 35px;
|
||||||
|
// text-align: center;
|
||||||
|
// background: url("~@/assets/landRes/1-dialog.png") no-repeat center;
|
||||||
|
//
|
||||||
|
// &:hover {
|
||||||
|
// background: url("~@/assets/landRes/1-dialog-highlight.png") no-repeat center;
|
||||||
|
// cursor: pointer;
|
||||||
|
// color: #fff
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// .d2 {
|
||||||
|
// // position: absolute;
|
||||||
|
// // left: 1060px;
|
||||||
|
// // top: 485px;
|
||||||
|
// width: 182px;
|
||||||
|
// height: 53px;
|
||||||
|
// line-height: 35px;
|
||||||
|
// text-align: center;
|
||||||
|
// background: url("~@/assets/landRes/2-dialog.png") no-repeat center;
|
||||||
|
//
|
||||||
|
// &:hover {
|
||||||
|
// background: url("~@/assets/landRes/2-dialog-highlight.png") no-repeat center;
|
||||||
|
// cursor: pointer;
|
||||||
|
// color: #fff
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// .d3 {
|
||||||
|
// position: absolute;
|
||||||
|
// left: 520px;
|
||||||
|
// top: 515px;
|
||||||
|
// width: 234px;
|
||||||
|
// height: 53px;
|
||||||
|
// line-height: 35px;
|
||||||
|
// text-align: center;
|
||||||
|
// font-size: 14px;
|
||||||
|
// background: url("~@/assets/landRes/3-dialog.png") no-repeat center;
|
||||||
|
//
|
||||||
|
// &:hover {
|
||||||
|
// background: url("~@/assets/landRes/3-dialog-highlight.png") no-repeat center;
|
||||||
|
// cursor: pointer;
|
||||||
|
// color: #fff
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
//
|
||||||
|
//}
|
||||||
|
.leftModel {
|
||||||
|
width: 24%;
|
||||||
|
left: 2%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.rightModel {
|
||||||
|
right: 2%;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
// width: 26%;
|
||||||
|
width: 26%;
|
||||||
|
//padding-top: 15px;
|
||||||
|
top: 11%;
|
||||||
|
.panelBox {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
}
|
||||||
overflow: hidden;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.d1 {
|
.panel {
|
||||||
|
// margin: 20px;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
position: absolute;
|
||||||
|
top: 41px;
|
||||||
|
left: 42px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
color: $default-font-color;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_box {
|
||||||
|
width: 98px;
|
||||||
|
height: 98px;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
background-image: url("~@/assets/wisdom2/panel-blue.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top;
|
||||||
|
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
background-image: url("~@/assets/wisdom2/panel-green.png")
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
background-image: url("~@/assets/wisdom2/panel-blue.png")
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(4) {
|
||||||
|
background-image: url("~@/assets/wisdom2/panel-green.png")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d1 {
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// left: 830px;
|
// left: 830px;
|
||||||
// top: 395px;
|
// top: 395px;
|
||||||
|
|
@ -847,9 +995,8 @@ export default {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #fff
|
color: #fff
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.d2 {
|
||||||
.d2 {
|
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// left: 1060px;
|
// left: 1060px;
|
||||||
// top: 485px;
|
// top: 485px;
|
||||||
|
|
@ -864,10 +1011,10 @@ export default {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #fff
|
color: #fff
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.d3 {
|
.d3 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 520px;
|
left: 520px;
|
||||||
top: 515px;
|
top: 515px;
|
||||||
|
|
@ -883,10 +1030,6 @@ export default {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #fff
|
color: #fff
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "../../assets/scss/index.scss";
|
@import "../../assets/scss/index.scss";
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
<template>
|
||||||
|
<!-- <div class="flood-plan-page" style="height: 100%;width: 100%">-->
|
||||||
|
<!-- <unity ref="unityPlan" class="unity-box" id="unity-infame" src="/JianPu_Building/Build/JianPu_Building.json" frameborder="0" width="100%" height="100%" scrolling="no"-->
|
||||||
|
<!-- unity-loader="/JianPu_Building/Build/UnityLoader.js"-->
|
||||||
|
<!-- />-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div>
|
||||||
|
<iframe src="/JianPu_Building/index.html" name="iframe_Name" ref="iframe" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
||||||
|
<!-- <div style="position: absolute">-->
|
||||||
|
<!-- <button @click="addNode()">点击交互</button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Unity from 'vue-unity-webgl'
|
||||||
|
export default {
|
||||||
|
name: "unityDemo",
|
||||||
|
components:{
|
||||||
|
Unity
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
onProgress:[
|
||||||
|
{
|
||||||
|
id:'1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:'2'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
addNode(){
|
||||||
|
//点击事件
|
||||||
|
this.$refs.iframe.contentWindow.unityInstance.SendMessage("TestObj","productName",'1')
|
||||||
|
console.log('当前unity对象', this.$refs.iframe.contentWindow.unityInstance)
|
||||||
|
console.log(this.onProgress.length)
|
||||||
|
},
|
||||||
|
// 恢复默认时，unity回传的
|
||||||
|
// unityWatch(obj) {
|
||||||
|
// const eachObj = obj.detail // 获取当前回来的数据
|
||||||
|
// this.fovValue = [eachObj.fovMin, eachObj.fovMax]
|
||||||
|
// this.fovMin = eachObj.fovMin
|
||||||
|
// this.fovMax = eachObj.fovMax
|
||||||
|
// this.angleMin = eachObj.angleMin
|
||||||
|
// this.angleMax = eachObj.angleMax
|
||||||
|
// },
|
||||||
|
// big(){
|
||||||
|
// // window.frames["iframe_Name"].window.init1();
|
||||||
|
// this.$refs.iframe.contentWindow.init();
|
||||||
|
// console.log(11111999)
|
||||||
|
// },
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 恢复默认设置
|
||||||
|
// window.addEventListener('getFovDef', this.unityWatch)
|
||||||
|
// this.$once('hook:beforeDestroy', () => {
|
||||||
|
// window.removeEventListener('getFov', this.unityWatch)
|
||||||
|
// })
|
||||||
|
// this.$refs.iframe.contentWindow.unityInstance.SetFullscreen(1)
|
||||||
|
// this.big()
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -3,12 +3,13 @@
|
||||||
<div
|
<div
|
||||||
class="bg"
|
class="bg"
|
||||||
>
|
>
|
||||||
|
<iframe src="/travel/travelMap.html" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
||||||
<div class="body-left"></div>
|
<div class="body-left"></div>
|
||||||
<div class="body-right"></div>
|
<div class="body-right"></div>
|
||||||
<div class="body-bottom"></div>
|
<div class="body-bottom"></div>
|
||||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||||
<div v-else class="host-body">
|
<div v-else class="host-body">
|
||||||
<headerIndex :cdata="{ title: '出行安全', margin: '26px auto' }" />
|
<headerIndex :cdata="{ title: '出行安全', margin: '26px auto' }" style="position: relative"/>
|
||||||
|
|
||||||
<div class="body-box">
|
<div class="body-box">
|
||||||
<!-- 第三行数据 -->
|
<!-- 第三行数据 -->
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,14 @@
|
||||||
backgroundImage:
|
backgroundImage:
|
||||||
'url(' + require(`../../../assets/${backgroundPic.index}.png`) + ')',
|
'url(' + require(`../../../assets/${backgroundPic.index}.png`) + ')',
|
||||||
}"> -->
|
}"> -->
|
||||||
|
<iframe src="/wisdom/wisdomMap.html" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
||||||
<div class="body-left"></div>
|
<div class="body-left"></div>
|
||||||
<div class="body-right"></div>
|
<div class="body-right"></div>
|
||||||
<div class="body-bottom"></div>
|
<div class="body-bottom"></div>
|
||||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||||
<div v-else class="host-body" id="wis">
|
<div v-else class="host-body" id="wis">
|
||||||
<headerIndex :cdata="{ title: '智慧工地', margin: '26px auto' }" />
|
<headerIndex :cdata="{ title: '智慧工地', margin: '26px auto' }" style="position: relative
|
||||||
|
"/>
|
||||||
<div class="main" style="margin-top:-100px">
|
<div class="main" style="margin-top:-100px">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<BasicBox title="人员信息概览" :dataSource="false">
|
<BasicBox title="人员信息概览" :dataSource="false">
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,13 @@
|
||||||
'url(' + require(`../../assets/${backgroundPic.index}.png`) + ')',
|
'url(' + require(`../../assets/${backgroundPic.index}.png`) + ')',
|
||||||
}"> -->
|
}"> -->
|
||||||
<div class="bg">
|
<div class="bg">
|
||||||
|
<iframe src="/wisdom/wisdomMap.html" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
||||||
<div class="body-left"></div>
|
<div class="body-left"></div>
|
||||||
<div class="body-right"></div>
|
<div class="body-right"></div>
|
||||||
<div class="body-bottom"></div>
|
<div class="body-bottom"></div>
|
||||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||||
<div v-else class="host-body">
|
<div v-else class="host-body">
|
||||||
<headerIndex :cdata="{ title: '智慧工地', margin: '26px auto' }" />
|
<headerIndex :cdata="{ title: '智慧工地', margin: '26px auto' }" style="position: relative"/>
|
||||||
<div class="main" style="margin-top:-100px">
|
<div class="main" style="margin-top:-100px">
|
||||||
<div @click="go" v-for="(item, index)
|
<div @click="go" v-for="(item, index)
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue