朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 460954fc9350eba32c804ffae91ee55a4663370f 1 个父辈 b978fff1 master ... ExportOrder flightplan2.0 master_dev master_dev_markdown master_dev_permission master_ffmTemp zhidan

本地

内嵌 并排对比
正在显示 15 个修改的文件 包含 2335 行增加 和 714 行删除
... ... @@ -24,17 +24,18 @@ module.exports = {
},
dev: {
env: require('./dev.env'),
port: 12026,
port: 12021,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target: 'http://192.168.1.53:12343',//设置你调用的接口域名和端口号 别忘了加http
// target: 'http://192.168.1.189:12343',//设置你调用的接口域名和端口号 别忘了加http
// target: 'http://localhost:12343',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api/': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
'^/api/': '/', //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
}
}
},
... ...
... ... @@ -3274,12 +3274,25 @@
}
},
"echarts": {
"version": "3.8.5",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-3.8.5.tgz",
"integrity": "sha512-E+nnROMfCeiLeoT/fZyX8SE8mKzwkTjyemyoBF543oqjRtjTSKQAVDEihMXy4oC6pJS0tYGdMqCA2ATk8onyRg==",
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.0.2.tgz",
"integrity": "sha512-En0VYpc96nw2/2AZoBWPHsGi471zMublttj50kfFpYAeR4geup0Tj9iVgEXh7QYZFPnRiruDJEjcB5PXZ+BYzQ==",
"requires": {
"zrender": "3.7.4"
"tslib": "2.0.3",
"zrender": "5.0.4"
},
"dependencies": {
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
}
}
},
"echarts-liquidfill": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/echarts-liquidfill/-/echarts-liquidfill-3.0.0.tgz",
"integrity": "sha512-asBu62Zxpod9ZRYHweBoBvp7e+XtQbQoha19aTEJf2UptJJ2Bppcx8TdwQZnTjPM9s/yYD6Tk4/qcRqZ6s8HZA=="
},
"editorconfig": {
"version": "0.15.3",
... ... @@ -14203,9 +14216,19 @@
}
},
"zrender": {
"version": "3.7.4",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-3.7.4.tgz",
"integrity": "sha512-5Nz7+L1wIoL0+Pp/iOP56jD6eD017qC9VRSgUBheXBiAHgOBJZ4uh4/g6e83acIwa8RKSyZf/FlceKu5ntUuxQ=="
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.0.4.tgz",
"integrity": "sha512-DJpy0yrHYY5CuH6vhb9IINWbjvBUe/56J8aH86Jb7O8rRPAYZ3M2E469Qf5B3EOIfM3o3aUrO5edRQfLJ+l1Qw==",
"requires": {
"tslib": "2.0.3"
},
"dependencies": {
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
}
}
}
}
}
... ...
... ... @@ -13,7 +13,8 @@
"@xkeshi/vue-barcode": "^1.0.0",
"axios": "^0.19.0",
"common": "^0.2.5",
"echarts": "^3.3.2",
"echarts": "^5.0.1",
"echarts-liquidfill": "^3.0.0",
"element-ui": "^2.13.0",
"eslint": "^5.14.1",
"eslint-plugin-html": "^6.0.2",
... ...
... ... @@ -52,6 +52,8 @@ import importFWBMsg from './views/airRadioMsg/importFWBMsg.vue'
import echarts from './views/charts/echarts.vue'
import earthCharts from './views/charts/earthCharts.vue'
import SecrityInspection from './views/staff/security_inspection.vue'
import Key from './views/staff/key.vue'
import Maintain from './views/staff/maintain.vue'
... ... @@ -101,6 +103,9 @@ import Warehouse from './views/station_manage/Warehouse.vue'
import Express from './views/express_system/express.vue'
//给海龙做的货运单
import Way from './views/nav3/Way.vue'
//朱总让做的网页在线客服
import Webdialog from './views/bus/Webdialog.vue'
... ... @@ -127,6 +132,16 @@ let routes = [
{path: '/main', component: Main, name: '首页'},
]
},
{
path: '/',
component: Home,
name: 'Charts',
iconCls: 'fa fa-bar-chart',
children: [
{path: '/echarts', component: echarts, name: 'echarts'},
{path: '/earthCharts', component: earthCharts, name: '统计表'}
]
},
// { path: '/test', component: Main },
{
path: '/bill',
... ... @@ -134,54 +149,55 @@ let routes = [
name: '货运单',
iconCls: 'el-icon-collection',
children: [
{path: '/Way', component: Way, name: '货运单'}
{path: '/Way', component: Way, name: '货运单'},
{path: '/Webdialog', component: Webdialog, name: '在线客服'}
]
},
{
path: '/',
component: Home,
name: '海关货物流转',
iconCls: 'el-icon-delete-location',
children: [
{ path: '/Page6', component: Page6, name: '申请列表' },
{ path: '/Page7', component: Page7, name: '申请添加' },
]
},
{
path: '/domdep',
component: Home,
name: '订舱系统',
iconCls: 'el-icon-delete-location',
children: [
{ path: '/booking', component: booking, name: '在线订舱' },
{ path: '/order', component: order, name: '订舱信息' },
{ path: '/airlift', component: airlift, name: '空运专线' },
]
},
// {
// path: '/',
// component: Home,
// name: '海关货物流转',
// iconCls: 'el-icon-delete-location',
// children: [
// { path: '/Page6', component: Page6, name: '申请列表' },
// { path: '/Page7', component: Page7, name: '申请添加' },
// ]
// },
//
// {
// path: '/domdep',
// component: Home,
// name: '订舱系统',
// iconCls: 'el-icon-delete-location',
// children: [
// { path: '/booking', component: booking, name: '在线订舱' },
// { path: '/order', component: order, name: '订舱信息' },
// { path: '/airlift', component: airlift, name: '空运专线' },
// ]
// },
// 货运系统--航班预配
// {
// path: '/domdep',
// component: Home,
// name: '国内出港',
// iconCls: 'el-icon-position',
// children: [
// { path: '/preConfiguration', component: preConfiguration, name: '航班预配' },
// { path: '/allocate', component: allocate, name: '航班配载' },
// { path: '/documents', component: documents, name: '航班文件' },
// { path: '/charge', component: charge, name: '付费处理' },
//
// // { path: '/perm', component: Perm, name: '权限管理' },
// // { path: '/log', component: LOG, name: '系统日志' },
// // { path: '/department', component: Department, name: '部门管理' },
// // { path: '/company', component: Company, name: '公司管理'},
// // { path: '/group', component: Group, name: '集团管理'}
// ]
// },
{
path: '/domdep',
component: Home,
name: '国内出港',
iconCls: 'el-icon-position',
children: [
{ path: '/preConfiguration', component: preConfiguration, name: '航班预配' },
{ path: '/allocate', component: allocate, name: '航班配载' },
{ path: '/documents', component: documents, name: '航班文件' },
{ path: '/charge', component: charge, name: '付费处理' },
// { path: '/perm', component: Perm, name: '权限管理' },
// { path: '/log', component: LOG, name: '系统日志' },
// { path: '/department', component: Department, name: '部门管理' },
// { path: '/company', component: Company, name: '公司管理'},
// { path: '/group', component: Group, name: '集团管理'}
]
},
// {
// path: '/admin',
// component: Home,
... ... @@ -389,15 +405,15 @@ let routes = [
// ]
// },
{
path: '/express-system',
component: Home,
name: '快邮舱单申报',
iconCls:'el-icon-wind-power',
children:[
{path:'/express',component:Express,name:'快邮舱单申报'},
]
},
// {
// path: '/express-system',
// component: Home,
// name: '快邮舱单申报',
// iconCls:'el-icon-wind-power',
// children:[
// {path:'/express',component:Express,name:'快邮舱单申报'},
// ]
// },
// {
// path: '/',
... ... @@ -448,15 +464,7 @@ let routes = [
// // { path: '/page6', component: Page6, name: '综合楼空调站' },
// ]
// },
// {
// path: '/',
// component: Home,
// name: 'Charts',
// iconCls: 'fa fa-bar-chart',
// children: [
// {path: '/echarts', component: echarts, name: 'echarts'}
// ]
// },
// {
// path: '*',
// hidden: true,
... ...
<template>
<el-container>
<div class="open">
<div class="navbar">
<a href="">
<div class="demo-basic--circle" >
<div class="block"><el-avatar shape="square" :size="60" :src="circleUrl"></el-avatar></div>
</div>
</a>
<ul class="navbars">
<li>
<el-button icon="el-icon-chat-line-round" style="border: none;font-size: 30px" circle></el-button>
</li>
<li>
<el-button icon="el-icon-phone-outline" style="border: none;font-size: 30px" circle></el-button>
</li>
<li>
<el-button icon="el-icon-menu" style="border: none;font-size: 30px" circle></el-button>
</li>
<li>
<el-button icon="el-icon-user" style="border: none;font-size: 30px" circle></el-button>
</li>
</ul>
</div>
</div>
<!--最新消息栏-->
<el-aside class="sidebar">
<div class="sidebars">
<div style="margin-top: -10px">
<div style="display: inline-block"><h2>Chats</h2></div>
<ul style="display: inline-block;list-style: none;margin-left: 250px;font-size: 20px">
<li style="display: inline">
<el-button icon="el-icon-bell" style="border: none;font-size: 20px" circle></el-button>
</li>
<li style="display: inline">
<el-button icon="el-icon-share" style="border: none;font-size: 20px" circle></el-button>
</li>
</ul>
</div>
<div style="margin-top: -15px">
<el-select v-model="value" placeholder="请选择" style="width: 150px;margin-left: -10px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input v-model="input1" placeholder="搜索" style="width: 220px;margin-left: 60px;">
</el-input>
<el-button icon="el-icon-search" style="margin-left: -6px;width: 50px;background-color: #F7F7F7;border-left: 0px" ></el-button>
</div>
</div>
<ul class="sidebard">
<li>
<a>
<div style="display: flex">
<div class="demo-basic--circle" >
<div class="block"><el-avatar :size="60" :src="circleUrls"></el-avatar></div>
</div>
</div>
<div style="padding-left: 10px;width: 100%">
<div class="father">
<h4 style="display: inline-block;line-height: 0px">{{name}}</h4>
<div class="sun">{{time}}</div>
<div style="background-color: rgb(245,108,108);display: inline-block;color: #FFFFFF;
width:30px;height:20px;line-height:20px;text-align:center;border-radius: 6.25rem;margin-left: 220px">
{{count}}</div>
</div>
<div style="margin: 0px;height: 30px">
<span style="margin: 0;display: inline-block;width: 85%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{content}}</span>
</div>
</div>
</a>
</li>
<li>
<a>
<div style="display: flex">
<div class="demo-basic--circle" >
<div class="block"><el-avatar :size="60" :src="circleUrls"></el-avatar></div>
</div>
</div>
<div style="padding-left: 10px;width: 100%">
<div class="father">
<h4 style="display: inline-block;line-height: 0px">{{name}}</h4>
<div class="sun">{{time}}</div>
<div style="background-color: rgb(245,108,108);display: inline-block;color: #FFFFFF;
width:30px;height:20px;line-height:20px;text-align:center;border-radius: 6.25rem;margin-left: 220px">
{{count}}</div>
</div>
<div style="margin: 0px;height: 30px">
<span style="margin: 0;display: inline-block;width: 85%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{content}}</span>
</div>
</div>
</a>
</li>
</ul>
</el-aside>
<!-- 对话框-->
<el-main class="main-message">
<!-- 对话框头部80-->
<div class="chat-body">
<!-- 当前聊天对象-->
<div style="display: inline-block">
<div style="display: table">
<el-avatar class="cell" :size="60" :src="circleUrls"></el-avatar>
<h2 class="cell" style="width: 400px;padding-left: 20px">{{name}}</h2>
</div>
</div>
<div style="display: inline-block;float: right">
<ul style="list-style: none;color: black">
<li>
<el-button icon="el-icon-search" circle></el-button>
<el-button icon="el-icon-phone-outline" circle></el-button>
<el-button icon="el-icon-share" circle></el-button>
<el-button icon="el-icon-document-remove" @click="drawer = true" circle></el-button>
</li>
</ul>
</div>
</div>
<!-- 聊天内容-->
<div class="chat-message">
<el-row style="padding-left: 10%">
<el-col style="width: 7%">
<el-avatar :size="45" :src="circleUrls"></el-avatar>
</el-col>
<el-col style="width: 60%">
<span>{{message1}}</span>
<!-- 聊天内容功能弹框-->
<el-dropdown>
<span class="el-dropdown-link">
<i class="el-icon-more el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-download">下载</el-dropdown-item>
<el-dropdown-item icon="el-icon-right">转发</el-dropdown-item>
<el-dropdown-item icon="el-icon-star-off">收藏</el-dropdown-item>
<el-dropdown-item icon="el-icon-close">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
<el-row style="padding-left: 30%">
<el-col style="width: 75%;margin-right: 20px">
<span>{{message2}}</span>
<!-- 聊天内容功能弹框-->
<el-dropdown>
<span class="el-dropdown-link">
<i class="el-icon-more el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-back">撤回</el-dropdown-item>
<el-dropdown-item icon="el-icon-download">下载</el-dropdown-item>
<el-dropdown-item icon="el-icon-right">转发</el-dropdown-item>
<el-dropdown-item icon="el-icon-star-off">收藏</el-dropdown-item>
<el-dropdown-item icon="el-icon-close">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col style="width: 10%">
<el-avatar :size="45" :src="circleUrl"></el-avatar>
</el-col>
</el-row>
</div>
<!-- 输入框-->
<div style="height: 100px;border: 1px solid #e5e9f2;padding-left: 50px;position:fixed;bottom:0;width: 100%;background-color: #FFFFFF">
<div style="line-height: 100px">
<el-button icon="el-icon-plus" circle></el-button>
<el-button icon="el-icon-cherry" circle style="margin-right: 30px"></el-button>
<el-input v-model="input" placeholder="请输入内容" style="width: 700px;margin-right: 30px"></el-input>
<el-button type="primary" style="width: 120px" plain onclick="show()">发送</el-button>
</div>
</div>
</el-main>
<!-- 当前对话人信息-->
<el-drawer
title=""
:visible.sync="drawer"
:with-header="false"
style="text-align: center">
<el-row style="margin-top: 150px">
<el-col>
<div class="block"><el-avatar :size="160" :src="circleUrls"></el-avatar></div>
</el-col>
</el-row>
<el-row>
<h2>{{name}}</h2>
</el-row>
<el-row>
<span>{{company}}</span>
</el-row>
<el-row>
<span>{{tel}}</span>
</el-row>
<el-row>
<span>{{address}}</span>
</el-row>
<el-row>
<span>{{email}}</span>
</el-row>
<el-row style="margin-top: 40px">
<el-button icon="el-icon-plus" style="font-size: 35px" circle type="success"></el-button>
<el-button icon="el-icon-star-off" style="font-size: 35px" circle type="warning"></el-button>
<el-button icon="el-icon-delete" type="danger" circle style="font-size: 35px" ></el-button>
</el-row>
</el-drawer>
</el-container>
</template>
<script>
export default {
name: "Webdialog",
data() {
return {
name:'Catherine Richardson',
time:'10:20pm',
count:12,
content:'I’m sorry, I didn’t catch that. Could you please repeat?I’m sorry, I didn’t catch that. Could you please repeat?',
input:'',
str: [],
message1:'I’m sorry, I didn’t catch that. Could you please repeat?I’m sorry, I didn’t catch that. Could you please repeat?',
message2:'I’m sorry, I didn’t catch that. Could you please repeat?I’m sorry, I didn’t catch that. Could you please repeat?',
company:'海程邦达',
tel:'+01-222-364522',
address:'1134 Ridder Park Road, San Fransisco, CA 94851',
email:'catherine.richardson@gmail.com',
drawer: false,
direction: 'rtl',
circleUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3123037902,210333744&fm=26&gp=0.jpg',
circleUrls:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202009%2F07%2F20200907065007_86b1b.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616315479&t=f9d95ef3f1894a34100224ea60944a9c'
}
},
methods: {
show() {
var message = document.getElementById("message2");
var input = document.getElementById("input");
message.innerHTML = input.value;
}
}
}
</script>
<style scoped>
.open{
display: flex;
}
.navbar{
height: 900px;
width: 110px;
background-color: #F7F7F7;
text-align: center;
padding-top: 60px;
}
.navbars{
list-style: none;
line-height: 100px;
margin-left: -35px;
}
.navbars li a {
color: rgb(73,80,87);
font-size: 30px
}
.navbars li:hover a {
color: rgb(57,138,241);
}
.sidebar{
width: 540px!important;
height: 900px;
position: relative;
overflow: hidden;
background-color: rgba(248,249,250,0.5);
/*overflow-y: auto;*/
/*overflow-x: hidden;*/
border: 1px solid #e5e9f2;
}
.sidebars{
background-color: #fff;
height: 120px;
padding-left: 40px;
border-bottom: 1px solid #e5e9f2;
}
.sidebard{
margin-top: 125px;
padding: 12px;
list-style: none;
position: absolute;
left: 0;
top: 0;
right: -23px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.sidebard li a{
padding: 16px 20px;
margin-bottom: 10px;
border: 1px solid #e5e9f2;
display: flex;
border-radius: .25rem;
background-color: transparent;
}
.father{
position: relative;
display: block;
height: 30px;
margin-top: 0px
}
.sun{
position: absolute;
display: inline;
width: 50px;
top: 0px;
left: 280px;
}
.chat-body{
height: 80px;
border-bottom: 1px solid #e5e9f2;
padding: 10px 50px;
}
.chat-body div ul li .el-button{
border: none;
font-size: 20px
}
.chat-body div .cell{
display: table-cell;
vertical-align:middle;
}
.el-input__inner{
background-color: #FFFFFF!important;
}
.main-message{
background-color: #fff;
height: 900px;
border-top: 1px solid #e5e9f2;
width: 100%;
position: relative;
}
.chat-message{
border-right: 1px solid #e5e9f2;
height:660px;
padding-top: 20px;
position: absolute;
left: 0;
top: 100px;
right: -43px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
... ...
<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!-- <meta charset="utf-8">-->
<!-- &lt;!&ndash; 引入 echarts.js &ndash;&gt;-->
<!--&lt;!&ndash; 引入主题&ndash;&gt;-->
<!--&lt;!&ndash; <script src="https://www.runoob.com/static/js/wonderland.js"></script>&ndash;&gt;-->
<!--</head>-->
<!--<body>-->
<template>
<!-- <iframe src="https://www.thingjs.com/s/d37fa296badd5a26cb52ec26" style="margin: 0;padding: 0" height="1100px" width="100%" ></iframe>-->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="width: 100%;height: 700px;padding-top: 30px;border:0px;margin-top: 20px;overflow:auto">
<!-- background-color: rgba(76,90,95,0.2);-->
<div id="chartColumn" style="width: 50%;height:400px;float: left;margin-right: 50px"></div>
<div id="chartBar" style="width: 40%;height:500px;float: left"></div>
<div id="chartLine" style="width: 100%;height:500px;float: left"></div>
<div id="chartPie" style="width: 45%;height:500px;float: left"></div>
<div id="chartPies" style="width: 50%;height:500px;float: left"></div>
<div id="extendShape" style="width: 45%;height:500px;float: left"></div>
<div id="" style="width: 45%;height:500px;float: left"></div>
</div>
</template>
<script type="text/javascript">
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
// import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
data() {
return {
chartColumn: null,
chartBar: null,
chartLine: null,
chartPie: null,
chartPies: null,
}
},
methods: {
drawColumnChart() {
let chartColumn = echarts.init(document.getElementById('chartColumn'));
chartColumn.setOption({
title: {
text: 'ECharts',
x:'left'
},
tooltip: {
trigger:"axis",
},
legend: {
data:['原始','理货','异常','舱单总量'],
x:'right'
},
yAxis: {
data: ["CV9703","CV9703","CV9703","CV9703","CV9703","CV9703"]
},
// color:['#ccc','red'],
xAxis: {
splitLine: {
show: false
},
axisLabel:{
formatter:"{value}"
}
},
series: [
{
name: '舱单总量',
type: 'bar',
barWidth : 25,
z:"-1",
barGap: '-100%',
data: [120, 130, 90, 80, 100, 110],
itemStyle: {
normal: {
color:"rgba(97,187,244,0.3)",
barBorderRadius:[8,9,9,8]
}
}
},
{
name: '原始',
type: 'bar',
barWidth : 25,
stack: '广告',
data: [56, 20, 36, 40, 30, 20],
itemStyle: {
normal: {
color:"#61BBF4",
barBorderRadius:[8,9,9,8]
}
}
},
{
name: '理货',
type: 'bar',
stack: '广告',
data: [16, 40, 16, 20, 20, 10],
itemStyle: {
normal: {
color:"#FFB6C1",
barBorderRadius:[8,9,9,8]
}
}
},
{
name: '异常',
type: 'bar',
stack: '广告',
data: [56, 20, 36, 40, 30, 20],
itemStyle: {
normal: {
color:"#778899",
barBorderRadius:[8,9,9,8]
}
}
}]
});
},
drawBarChart() {
let chartBar = echarts.init(document.getElementById('chartBar'));
chartBar.setOption({
legend: {
x : 'center',
data:['5X174','5Y561','CF222','CV4481','CX2050'],
textStyle:{
color:"#000"
}
},
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
// 动态类型切换配置项
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true},
}
},
calculable : true,
series : [
{
name:'航班',
type:'pie',
radius : '55%',
tooltip : {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
center: ['50%', '60%'],
data:[
{
value:335,
name:'5X174',
itemStyle: {
normal: {
color:"#1afffd"
}
}},
{
value:310,
name:'5Y561',
itemStyle: {
normal: {
color:"#2e7cff"
}
}},
{
value:234,
name:'CF222',
itemStyle: {
normal: {
color:"#ffcb89"
}
}},
{
value:135,
name:'CV4481',
itemStyle: {
normal: {
color:"#005ea1"
}
}},
{
value:1548,
name:'CX2050',
itemStyle: {
normal: {
color:"#0ad5ff"
}
}}
]
}
// {
// name: '外边框',
// type: 'pie',
// clockWise: false,
// radius: ['57%', '57%'],//边框大小
// center: ['50%', '60%'],//边框位置
// data: [{
// value: 20,
// itemStyle: {
// normal: {
// borderWidth: 10,//设置边框粗细
// borderColor: 'rgb(9,37,71, 0.5)'//边框颜色
// }
// }
// }]
// },
]
});
},
drawLineChart() {
let chartLine = echarts.init(document.getElementById('chartLine'));
chartLine.setOption({
tooltip : {
trigger: 'item'
},
grid: {
top: '16%',
bottom: '54%',
left: "50%",
containLabel: false
},
series: [
// 红色进度线
{
type: 'pie',
z: 2,
hoverAnimation: false,
// 红色环面积粗细大小
radius: ['58%', '54%'],
// 红色环位置 距离左 上
center: ["50%", "55%"],
color: [{
// 线性渐变
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
// 0处的颜色
offset: 0,
color: 'rgba(234, 40, 125, 0.01)'
}, {
// 100%处的颜色
offset: 1,
color: 'rgba(10, 40, 125, 0.5)'
}, {
// 100%处的颜色
offset: 1,
color: 'rgba(36, 61, 114, 0.5)'
}],
global: false
}],
// 标签
label: {
show: true,
formatter: '{d}%',
color:'rgba(36, 61, 114, 0.8)',
fontSize: 20
},
data: [{
value: 48,
name: '异常'
}, {
value: 100 - 48,
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 50
},
// 标签
label: {
show: false
},
// 悬停动画
hoverAnimation: false
}]
},
{
name: '背景线',
type: 'pie',
// 背景线旋转方向
startAngle: 130,
silent: true,
z: 1,
clockWise: true,
hoverAnimation: false,
radius: ['45%', '44%'],
center: ["50%", "55%"],
label: {
show: false
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false
},
color: 'rgba(10, 40, 125, 0.5)',
borderWidth: 5,
},
data: [{
// 背景线长度
value: 50,
tooltip: {
show: false
},
hoverAnimation: false
}, {
// 背景线剩余部分样式
value: 100 - 80,
name: '',
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 0
},
tooltip: {
show: false
},
label: {
show: false
},
hoverAnimation: false
}]
},
// 蓝色进度线
{
type: 'pie',
clockWise: true,
startAngle: 300,
z: 2,
hoverAnimation: false,
radius: ['73%', '68%'],
center: ["50%", "55%"],
color: [{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(20, 139, 218,0.01)'
}, {
offset: 1,
color: 'rgba(20, 139, 218,1)'
}],
global: false
}],
label: {
show: true,
formatter: '{d}%',
color: 'rgba(20, 139, 218,1)',
fontSize: 20
},
data: [{
value:52,
name: '已完成'
}, {
value: 100 -52,
name: '',
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 0
},
tooltip: {
show: false
},
label: {
show: false
},
hoverAnimation: false
}]
},
{
name: '背景线',
type: 'pie',
silent: true,
startAngle:0,
z: 1,
clockWise: true,
hoverAnimation: false,
radius: ['82%', '83%'],
center: ["50%", "55%"],
label: {
show: false
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false
},
color: 'rgba(10, 40, 125, 0.5)',
borderWidth: 5,
},
data: [{
value: 80,
tooltip: {
show: false
},
hoverAnimation: false
}, {
value: 100 - 80,
name: '',
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 0
},
tooltip: {
show: false
},
label: {
show: false
},
hoverAnimation: false
}]
},
],
});
},
drawPieChart() {
let chartPie = echarts.init(document.getElementById('chartPie'));
chartPie.setOption({
tooltip: {
trigger:"axis",
},
title: [{
text: '各航班进度统计表',
x: '70%',
y: 10,
textAlign: 'right',
textStyle: {
fontSize: '30',
fontWeight: '100',
color: '#000',
},
}],
legend: {
type: 'scroll', // 设置图例翻页
icon: 'rect',
itemWidth: 12, // 图例图形宽度
itemHeight: 10,
orient: 'horizontal', // 图例横向排布
// data: title, // title是一个列表，存着图例的数据
left: 15, // 图例位置
bottom: 8,
textStyle: {
color: '#000',
fontSize: 12
},
pageIconColor: '#000',
pageTextStyle: {
color: '#000'
},
itemGap: 20,
top: '16%',
// textStyle: {
// color: '#000'
// },
},
grid: {
left: '3%',
top: '25%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
name: '',
// x轴固定在上方
position: 'top',
splitLine: {
show: false
},
// 轴上分隔断
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
// margin: 10,
textStyle: {
color: '#fff',
align: 'right'
}
}
},
// dataZoom: [//滑动条
// {
// show: false,//是否显示滑动条
// type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
// startValue: 0, // 从头开始。
// endValue: 5 // 一次性展示6个。
// }
// ],
dataZoom: [
{ //x轴固定,让内容滚动
type: 'slider',
show: false,
yAxisIndex: [0],
start: 1,
end: 50,//设置X轴刻度之间的间隔(根据数据量来调整)
zoomLock: true,
},
{
type: 'inside',
yAxisIndex: [0],
start: 1,
end: 50,
zoomLock: true, //锁定区域禁止缩放
},
],
yAxis: [
{
type: 'category',
name: '航班号',
data: ['9.CV9703', '8.CV9703', '7.CV9703', '6.CV9703','5.CV9703', '4.CV9703', '3.CV9703', '2.CV9703', '1.CV9703'],
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
// axisTick: {
// show: false
// },
axisLabel: {
// margin: 10,
// verticalAlign: 'bottom',
textStyle: {
color: '#000',
align: 'left',
verticalAlign: "bottom",
lineHeight: 50,
},
}
},{
type : 'category',
name : '各航班总票数',
data: ['108票', '26票', '35票', '85票', '76票'],
axisLabel : {
textStyle: {
color: '#000',
align: 'left'
}
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
},
],
color: [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(20,136,204,0.8)'
},
{
offset: 1,
color: 'rgba(43,50,178,0.1)'
}
]),
// new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// offset: 0,
// color: '#403A3E'
// },
// {
// offset: 1,
// color: '#BE5869'
// }
// ]),
// new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// offset: 0,
// color: '#2c3e50'
// },
// {
// offset: 1,
// color: '#bdc3c7'
// }
// ]),
],
series: [{
name: '',
type: 'bar',
xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
// data: [100, 100, 100, 100, 100, ],
barWidth: 5,
itemStyle: {
normal: {
color: 'rgba(255, 255, 255, 0)',
},
},
z: 1
},
{
name: '原始完成占比',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
shadowColor: '#000',
shadowBlur: 10,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(20,136,204,0.6)'
},
{
offset: 1,
color: 'rgba(43,50,178,0.2)'
}
]),
borderWidth: 1,
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor:'#000',
textShadowBlur:'0',
textShadowOffsetX:1,
textShadowOffsetY:1,
}
},
},
data: [29, 19, 26, 44,29, 19, 26, 44, 20, ]
},
{
name: '理货完成占比',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
shadowColor: '#000',
shadowBlur: 10,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(20,136,204,0.6)'
},
{
offset: 1,
color: 'rgba(43,50,178,0.2)'
}
]),
borderWidth: 1,
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor:'#000',
textShadowBlur:'0',
textShadowOffsetX:1,
textShadowOffsetY:1,
}
},
},
data: [38, 36, 44, 33,38, 36, 44, 33, 20, ]
},
{
name: '未完成占比',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
shadowColor: '#000',
shadowBlur: 10,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(20,136,204,0.6)'
},
{
offset: 1,
color: 'rgba(43,50,178,0.2)'
}
]),
borderWidth: 1,
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor:'#000',
textShadowBlur:'0',
textShadowOffsetX:1,
textShadowOffsetY:1,
}
},
},
data: [33, 45, 30, 23,33, 45, 30, 23, 60, ]
},
]
});
},
drawPiesCharts() {
let chartPies = echarts.init(document.getElementById('chartPies'));
chartPies.setOption({
// backgroundColor: '#050038',
tooltip: {
trigger:"item",
},
title: {
text: '今日航班进度',
textAlign: 'left',
textStyle: {
fontWeight: 'normal',
fontSize: 25,
color: 'rgb(97, 142, 205)'
}
},
series: [{
type: 'liquidFill',
// 内部小球的大小
radius: '80%',
center: ['50%', '50%'],
// data个数代表波浪数及大小
data: [0.3, 0.3, 0.3, 0.2],
backgroundStyle: {
borderWidth: 1,
color: 'rgb(2,0,0,0.02)'
},
label: {
normal: {
formatter: (0.2 * 100).toFixed(1) + '%',
textStyle: {
fontSize: 40
}
}
},
outline: {
show: false,
}
},
{
"type": "pie",
"center": ["50%", "50%"],
"radius": ["80%", "82%"],
"hoverAnimation": false,
// "data": [{
// "name": "",
// "value": 500,
// labelLine: {
// show: false
// },
// itemStyle: {
// color: '#5886f0'
// },
// emphasis: {
// labelLine: {
// show: false
// },
// itemStyle: {
// color: '#5886f0'
// },
// }
// },
// // {
// // //画中间的图标
// // "name": "",
// // "value": 4,
// // labelLine: {
// // show: false
// // },
// // itemStyle: {
// // color: '#ffffff',
// // "normal": {
// // "color": "#5886f0",
// // "borderColor": "#5886f0",
// // "borderWidth": 20,
// // borderRadius: '20%'
// // },
// // },
// // label: {
// //
// // borderRadius: '100%'
// // },
// // emphasis: {
// // labelLine: {
// // show: false
// // },
// // itemStyle: {
// // color: '#5886f0'
// // },
// // }
// //
// // },
// // {
// // // 解决圆点过大后续部分显示明显的问题
// // "name": "",
// // "value": 4,
// // labelLine: {
// // show: false
// // },
// // itemStyle: {
// // color: '#5886f0'
// // },
// // emphasis: {
// // labelLine: {
// // show: false
// // },
// // itemStyle: {
// // color: '#5886f0'
// // },
// // }
// // },
// // {
// // //画剩余的刻度圆环
// // "name": "",
// // "value": 600,
// // itemStyle: {
// // color: 'rgb(255,0,255,0.1)'
// // },
// // "label": {
// // show: false
// // },
// // labelLine: {
// // show: false
// // },
// // emphasis: {
// // labelLine: {
// // show: false
// // },
// // itemStyle: {
// // color: 'rgba(255,255,255,0)'
// // },
// // }
// // }
// ]
}
]
});
},
drawPiedCharts() {
let extendShape = echarts.init(document.getElementById('extendShape'));
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function(ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x, shape.y]
const c1 = [shape.x - 9, shape.y - 9]
const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
const c3 = [xAxisPoint[0], xAxisPoint[1]]
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
}
})
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function(ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c1 = [shape.x, shape.y]
const c2 = [xAxisPoint[0], xAxisPoint[1]]
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
const c4 = [shape.x + 18, shape.y - 9]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function(ctx, shape) {
const c1 = [shape.x, shape.y]
const c2 = [shape.x + 18, shape.y - 9]
const c3 = [shape.x + 9, shape.y - 18]
const c4 = [shape.x - 9, shape.y - 9]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]
extendShape.setOption({
tooltip: {
trigger:"axis",
},
title: {
text: '',
top: 32,
left: 18,
textStyle: {
color: '#00F6FF',
fontSize: 24
}
},
// title: [{
// text: '各航班进度统计表',
// x: '50%',
// y: 10,
// textAlign: 'center',
// textStyle: {
// fontSize: '30',
// fontWeight: '100',
// color: '#000',
// textAlign: 'center',
// },
// }, ],
grid: {
left: 20,
right: 40,
bottom: '19%',
top: 107,
containLabel: true
},
xAxis: {
type: 'category',
data: ['德州', '德城区', '陵城区', '禹城市', '乐陵市', '临邑县',
'平原县', '夏津县', '武城县', '庆云县', '宁津县', '齐河县'
],
axisLine: {
show: true,
lineStyle: {
color: 'black'
}
},
offset: 20,
axisTick: {
show: false,
length: 9,
alignWithLabel: true,
lineStyle: {
color: '#7DFFFD'
}
},
axisLabel: {
fontSize: 10
}
},
yAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'black'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16
},
boundaryGap: ['20%', '20%']
},
series: [{
name:'总量',
type: 'custom',
renderItem: function(params, api) {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(7,29,97,.6)'
}
}, {
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(10,35,108,.7)'
}
}, {
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(11,42,106,.8)'
}
}]
}
},
data: MAX
}, {
name:'占有',
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3B80E2'
},
{
offset: 1,
color: '#49BEE5'
}
])
}
}, {
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3B80E2'
},
{
offset: 1,
color: '#49BEE5'
}
])
}
}, {
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3B80E2'
},
{
offset: 1,
color: '#49BEE5'
}
])
}
}]
}
},
data: VALUE
},
// {
// type: 'bar',
// label: {
// normal: {
// show: true,
// position: 'top',
// formatter: (e) => {
// switch (e.name) {
// case '10kV线路':
// return VALUE[0]
// case '公用配变':
// return VALUE[1]
// case '35kV主变':
// return VALUE[2]
// case '水':
//
// }
// },
// fontSize: 16,
// color: 'black',
// offset: [4, -25]
// }
// },
// itemStyle: {
// color: 'transparent'
// },
// data: MAX
// }
],
shape: {
x: 0,
y: 0
},
buildPath: function(ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x, shape.y]
const c1 = [shape.x - 9, shape.y - 9]
const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
const c3 = [xAxisPoint[0], xAxisPoint[1]]
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
},
}
)
},
drawCharts() {
this.drawColumnChart()
this.drawBarChart()
this.drawLineChart()
this.drawPieChart()
this.drawPiesCharts()
this.drawPiedCharts()
},
},
mounted: function () {
this.drawCharts();
},
/*updated: function () {
this.drawCharts()
}*/
}
</script>
<!--</body>-->
<!--</html>-->
... ...
... ... @@ -16,7 +16,7 @@
</el-col>
<!--列表-->
<el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"
<el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;height:600px;overflow: scroll"
row-key="permissionId"
border
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
... ... @@ -418,6 +418,7 @@
</script>
<style rel="stylesheet/scss" lang="scss">
.el-drawer.rtl {
overflow: scroll
}
... ...
... ... @@ -39,7 +39,8 @@
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
... ... @@ -70,7 +71,8 @@
ref="multipleTable"
:data="tableData1"
tooltip-effect="dark"
style="width: 100%"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
... ... @@ -476,7 +478,8 @@
ref="multipleTable"
:data="tableData2"
tooltip-effect="dark"
style="width: 100%"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
... ...
... ... @@ -38,8 +38,9 @@
<el-table
ref="multipleTable"
:data="tableData"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
... ... @@ -59,7 +60,7 @@
</el-table-column>
<el-table-column
prop="volume"
label="体积">
label="体积">`
</el-table-column>
<el-table-column
prop="product"
... ... @@ -283,7 +284,8 @@
ref="multipleTable"
:data="tableData2"
tooltip-effect="dark"
style="width: 100%"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
@selection-change="handleSelectionChange">
<el-table-column
prop="type"
... ...
<!--<template>-->
<!-- <div class="bg">-->
<!-- <el-container>-->
<!--&lt;!&ndash; 主要区域&ndash;&gt;-->
<!-- <el-main>-->
<!--&lt;!&ndash; 空运查询内容&ndash;&gt;-->
<!-- <el-row style="margin-top: 30px">-->
<!-- <el-col :span="10" style="margin-right: 10px;background-color: #FFF;">-->
<!-- <div style="height: 600px;">-->
<!-- <div style="width: 100%;height: 80px;border-bottom: solid 2px #29A1F7;">-->
<!-- <el-col :span="15" style="margin-left: 0px;margin-top: 20px;">-->
<!-- <span style="font-size: 25px;margin-left: 50px">空运查询</span>-->
<!-- </el-col>-->
<!-- <el-col :span="8" style="margin-top: 23px;">-->
<!-- <span style="font-size: 17px">约计3000条航线数据</span>-->
<!-- </el-col>-->
<!-- </div>-->
<!-- <el-row>-->
<!-- <el-form ref="form" :model="form" label-width="80px" style="font-size: 50px;" >-->
<!-- <el-form-item label="航程方向" >-->
<!-- <el-radio-group v-model="form.airLine">-->
<!-- <el-radio style="padding-left: 20px" label="出口"></el-radio>-->
<!-- <el-radio label="进口"></el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="起运地">-->
<!-- <el-select style="width: 320px" v-model="form.originStation" placeholder="起运地">-->
<!-- <el-option label="CGO" value="shanghai"></el-option>-->
<!-- <el-option label="LUX" value="beijing"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="目的地">-->
<!-- <el-select style="width: 320px" v-model="form.deliveryAddress" placeholder="目的地">-->
<!-- <el-option label="CGO" value="shanghai"></el-option>-->
<!-- <el-option label="LUX" value="beijing"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="货物重量">-->
<!-- <el-input style="width: 320px" v-model="form.weight" placeholder="单位：KG"></el-input>-->
<!-- </el-form-item>-->
<!-- <div style="padding-left: 150px">-->
<!-- <el-button style="background-color: #F18F4C;color: #FFF">查价下单</el-button>-->
<!-- </div>-->
<!-- </el-form>-->
<!-- <div style="width: 100%;height: 200px;margin-top: 30px;padding-left: 50px;border-top: dashed 2px #D5D5D5;">-->
<!-- <p>-->
<!-- <span><i class="el-icon-phone" style="color: #29A1F7;padding-right: 5px"></i>一键订舱，方便快捷</span>-->
<!-- </p>-->
<!-- <p>-->
<!-- <span><i class="el-icon-edit-outline" style="color: #29A1F7;padding-right: 5px"></i>数据准确，专有团队维护</span>-->
<!-- </p>-->
<!-- <span><i class="el-icon-location-information" style="color: #29A1F7;padding-right: 5px"></i>货物在线跟踪</span>-->
<!-- </div>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- </el-col>-->
<!--&lt;!&ndash; 广告位&ndash;&gt;-->
<!-- <el-col :span="13" style="margin-right: 0px;background-color: rgba(41,161,247,0.1);float: right;">-->
<!-- <div style="height: 600px;width: 500px">-->
<template>
<div class="bg">
<el-container>
<!-- 主要区域-->
<el-main>
<!-- 空运查询内容-->
<el-row style="margin-top: 30px">
<el-col :span="10" style="margin-right: 10px;background-color: #FFF;">
<div style="height: 600px;">
<div style="width: 100%;height: 80px;border-bottom: solid 2px #29A1F7;">
<el-col :span="15" style="margin-left: 0px;margin-top: 20px;">
<span style="font-size: 25px;margin-left: 50px">空运查询</span>
</el-col>
<el-col :span="8" style="margin-top: 23px;">
<span style="font-size: 17px">约计3000条航线数据</span>
</el-col>
</div>
<el-row>
<el-form ref="form" :model="form" label-width="80px" style="font-size: 50px;" >
<el-form-item label="航程方向" >
<el-radio-group v-model="form.airLine">
<el-radio style="padding-left: 20px" label="出口"></el-radio>
<el-radio label="进口"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="起运地">
<el-select style="width: 320px" v-model="form.originStation" placeholder="起运地">
<el-option label="CGO" value="shanghai"></el-option>
<el-option label="LUX" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的地">
<el-select style="width: 320px" v-model="form.deliveryAddress" placeholder="目的地">
<el-option label="CGO" value="shanghai"></el-option>
<el-option label="LUX" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="货物重量">
<el-input style="width: 320px" v-model="form.weight" placeholder="单位：KG"></el-input>
</el-form-item>
<div style="padding-left: 150px">
<el-button style="background-color: #F18F4C;color: #FFF">查价下单</el-button>
</div>
</el-form>
<div style="width: 100%;height: 200px;margin-top: 30px;padding-left: 50px;border-top: dashed 2px #D5D5D5;">
<p>
<span><i class="el-icon-phone" style="color: #29A1F7;padding-right: 5px"></i>一键订舱，方便快捷</span>
</p>
<p>
<span><i class="el-icon-edit-outline" style="color: #29A1F7;padding-right: 5px"></i>数据准确，专有团队维护</span>
</p>
<span><i class="el-icon-location-information" style="color: #29A1F7;padding-right: 5px"></i>货物在线跟踪</span>
</div>
</el-row>
</div>
</el-col>
<!-- 广告位-->
<el-col :span="13" style="margin-right: 0px;background-color: rgba(41,161,247,0.1);float: right;">
<div style="height: 600px;width: 500px">
<img src="" width="700px" height="600px"/>
<!-- <img src="./air.jpg" width="700px" height="600px"/>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!--&lt;!&ndash; 优价航线标题栏&ndash;&gt;-->
<!-- <el-row style="margin-top: 30px">-->
<!-- <span style="font-size: 25px">优价航线</span>-->
<!-- </el-row>-->
<!--&lt;!&ndash; 优价航线内容&ndash;&gt;-->
<!-- <el-row style="background-color: #FFF;height: 300px;">-->
<!-- <el-table-->
<!-- :data="tableData"-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航行路线">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="运输时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="deliveryAddress"-->
<!-- label="交货地">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="航班周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportPrice"-->
<!-- label="最低价格">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- label=""-->
<!-- width="120">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="small" plain-->
<!-- type="warning"-->
<!-- @click="open">订舱</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </el-row>-->
<!--&lt;!&ndash; 热门航线标题栏&ndash;&gt;-->
<!-- <el-row style="margin-top: 30px">-->
<!-- <span style="font-size: 25px">热门航线</span>-->
<!-- </el-row>-->
<!--&lt;!&ndash; 热门航线内容&ndash;&gt;-->
<!-- <el-row style="background-color: #FFF;height: 680px;">-->
<!-- <el-col :span="24">-->
<!-- <el-tabs type="border-card" style="width: 100%;height: 680px" stretch="true">-->
<!-- <el-tab-pane>-->
<!-- <span slot="label"><i class="el-icon-right"></i>出口航线</span>-->
<!-- <el-row style="height: 300px;margin-top: 0px">-->
<!-- <el-col :span="8"-->
<!-- style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">-->
<!-- <h2>CV</h2>-->
<!-- <el-table-->
<!-- :data="tableData1"-->
<!-- :header-cell-style="headClass"-->
<!-- :cell-style="rowClass"-->
<!-- style="width: 100%;background-color: #F5F5F5">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航段">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportPrice"-->
<!-- label="航运价">-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->
<!-- <div style="text-align: center;margin-top: 6px">-->
<!-- <el-button type="warning" plain style="width: 120px" >订舱</el-button>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8"-->
<!-- style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">-->
<!-- <h2>CV</h2>-->
<!-- <el-table-->
<!-- :data="tableData2"-->
<!-- :header-cell-style="headClass"-->
<!-- :cell-style="rowClass"-->
<!-- style="width: 100%;background-color: #F5F5F5">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航段">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportPrice"-->
<!-- label="航运价">-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->
<!-- <div style="text-align: center;margin-top: 6px">-->
<!-- <el-button type="warning" plain style="width: 120px" >订舱</el-button>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8"-->
<!-- style="border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%">-->
<!-- <h2>CV</h2>-->
<!-- <el-table-->
<!-- :data="tableData3"-->
<!-- :header-cell-style="headClass"-->
<!-- :cell-style="rowClass"-->
<!-- style="width: 100%;background-color: #F5F5F5">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航段">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportPrice"-->
<!-- label="航运价">-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->
<!-- <div style="text-align: center;margin-top: 6px">-->
<!-- <el-button type="warning" plain style="width: 120px">订舱</el-button>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- <el-row style="height: 300px;margin-top: 0px">-->
<!-- <el-col :span="8"-->
<!-- style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">-->
<!-- <h2>CZ</h2>-->
<!-- <el-table-->
<!-- :data="tableData4"-->
<!-- :header-cell-style="headClass"-->
<!-- :cell-style="rowClass"-->
<!-- style="width: 100%;background-color: #F5F5F5">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航段">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportPrice"-->
<!-- label="航运价">-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->
<!-- <div style="text-align: center;margin-top: 6px">-->
<!-- <el-button type="warning" plain style="width: 120px" >订舱</el-button>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8"-->
<!-- style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">-->
<!-- <h2>CZ</h2>-->
<!-- <el-table-->
<!-- :data="tableData5"-->
<!-- :header-cell-style="headClass"-->
<!-- :cell-style="rowClass"-->
<!-- style="width: 100%;background-color: #F5F5F5">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航段">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportPrice"-->
<!-- label="航运价">-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->
<!-- <div style="text-align: center;margin-top: 6px">-->
<!-- <el-button type="warning" plain style="width: 120px" >订舱</el-button>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8"-->
<!-- style="height: 300px;width: 32%">-->
<!-- <h2>CZ</h2>-->
<!-- <el-table-->
<!-- :data="tableData6"-->
<!-- :header-cell-style="headClass"-->
<!-- :cell-style="rowClass"-->
<!-- style="width: 100%;background-color: #F5F5F5">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航段">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportPrice"-->
<!-- label="航运价">-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->
<!-- <div style="text-align: center;margin-top: 6px">-->
<!-- <el-button type="warning" plain style="width: 120px" >订舱</el-button>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="进口航线">-->
<!-- <span slot="label"><i class="el-icon-back"></i>进口航线</span>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="空运专线">-->
<!-- <span slot="label"><i class="el-icon-star-off"></i>空运专线</span>-->
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!--&lt;!&ndash; 热门港口标题栏&ndash;&gt;-->
<!-- <el-row style="margin-top: 30px">-->
<!-- <span style="font-size: 25px">热门港口</span>-->
<!-- </el-row>-->
<!--&lt;!&ndash; 热门港口内容&ndash;&gt;-->
<!-- <el-row style="background-color: #FFF;height: 300px;padding: 25px">-->
<!-- <el-col :span="24">-->
<!-- <el-tabs :tab-position="tabPosition" style="width: 100%;height: 280px;">-->
<!-- <el-tab-pane label="北京">-->
<!-- <el-table-->
<!-- :data="tableData7"-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航行路线">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="运输时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="deliveryAddress"-->
<!-- label="交货地">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="航班周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- label=""-->
<!-- width="120">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="small" plain-->
<!-- type="warning"-->
<!-- @click="">订舱</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="上海">-->
<!-- <el-table-->
<!-- :data="tableData8"-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航行路线">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="运输时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="deliveryAddress"-->
<!-- label="交货地">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="航班周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- label=""-->
<!-- width="120">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="small" plain-->
<!-- type="warning"-->
<!-- @click="">订舱</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="深圳">-->
<!-- <el-table-->
<!-- :data="tableData9"-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航行路线">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="运输时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="deliveryAddress"-->
<!-- label="交货地">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="航班周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- label=""-->
<!-- width="120">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="small" plain-->
<!-- type="warning"-->
<!-- @click="">订舱</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="广州">-->
<!-- <el-table-->
<!-- :data="tableData10"-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航行路线">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="运输时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="deliveryAddress"-->
<!-- label="交货地">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="航班周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- label=""-->
<!-- width="120">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="small" plain-->
<!-- type="warning"-->
<!-- @click="">订舱</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="宁波">-->
<!-- <el-table-->
<!-- :data="tableData11"-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="airLine"-->
<!-- label="航行路线">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="transportLimitation"-->
<!-- label="运输时效">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="deliveryAddress"-->
<!-- label="交货地">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="flightCycle"-->
<!-- label="航班周期">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- label=""-->
<!-- width="120">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="small" plain-->
<!-- type="warning"-->
<!-- @click="">订舱</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!--&lt;!&ndash; 查询工具&ndash;&gt;-->
<!-- <el-row style="background-color: #FFF;height: 180px;margin-top: 60px">-->
<!-- <el-col :span="24">-->
<!-- <el-tabs :tab-position="tabPositions" style="width: 80%;height: 280px;margin: 20px">-->
<!-- <el-tab-pane label="机场代码查询">-->
<!-- <span style="font-size: 25px">机场代码查询</span>-->
<!-- <span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>-->
<!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="商品编码查询">-->
<!-- <span style="font-size: 25px">商品编码查询</span>-->
<!-- <span style="font-size: 15px">（提供海关HScode编码、对应税率、申报要素查询服务，根据海关最新政策实时更新。）</span>-->
<!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="全球港口查询">-->
<!-- <span style="font-size: 25px">全球港口查询</span>-->
<!-- <span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>-->
<!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="空运货物查询">-->
<!-- <span style="font-size: 25px">空运货物查询</span>-->
<!-- <span style="font-size: 15px">（提供世界各国航空公司货物追踪、货物查询服务，实时追踪最新货况。）</span>-->
<!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="快件跟踪查询">-->
<!-- <span style="font-size: 25px">快件跟踪查询</span>-->
<!-- <span style="font-size: 15px"></span>-->
<!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-main>-->
<!-- </el-container>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!-- export default {-->
</div>
</el-col>
</el-row>
<!-- 优价航线标题栏-->
<el-row style="margin-top: 30px">
<span style="font-size: 25px">优价航线</span>
</el-row>
<!-- 优价航线内容-->
<el-row style="background-color: #FFF;height: 300px;">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="airLine"
label="航行路线">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="运输时效">
</el-table-column>
<el-table-column
prop="deliveryAddress"
label="交货地">
</el-table-column>
<el-table-column
prop="flightCycle"
label="航班周期">
</el-table-column>
<el-table-column
prop="transportPrice"
label="最低价格">
</el-table-column>
<el-table-column
fixed="right"
label=""
width="120">
<template slot-scope="scope">
<el-button
size="small" plain
type="warning"
@click="open">订舱</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<!-- 热门航线标题栏-->
<el-row style="margin-top: 30px">
<span style="font-size: 25px">热门航线</span>
</el-row>
<!-- 热门航线内容-->
<el-row style="background-color: #FFF;height: 680px;">
<el-col :span="24">
<el-tabs type="border-card" style="width: 100%;height: 680px" stretch="true">
<el-tab-pane>
<span slot="label"><i class="el-icon-right"></i>出口航线</span>
<el-row style="height: 300px;margin-top: 0px">
<el-col :span="8"
style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
<h2>CV</h2>
<el-table
:data="tableData1"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="airLine"
label="航段">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="时效">
</el-table-column>
<el-table-column
prop="flightCycle"
label="周期">
</el-table-column>
<el-table-column
prop="transportPrice"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px" >订舱</el-button>
</div>
</el-col>
<el-col :span="8"
style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
<h2>CV</h2>
<el-table
:data="tableData2"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="airLine"
label="航段">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="时效">
</el-table-column>
<el-table-column
prop="flightCycle"
label="周期">
</el-table-column>
<el-table-column
prop="transportPrice"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px" >订舱</el-button>
</div>
</el-col>
<el-col :span="8"
style="border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%">
<h2>CV</h2>
<el-table
:data="tableData3"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="airLine"
label="航段">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="时效">
</el-table-column>
<el-table-column
prop="flightCycle"
label="周期">
</el-table-column>
<el-table-column
prop="transportPrice"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px">订舱</el-button>
</div>
</el-col>
</el-row>
<el-row style="height: 300px;margin-top: 0px">
<el-col :span="8"
style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
<h2>CZ</h2>
<el-table
:data="tableData4"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="airLine"
label="航段">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="时效">
</el-table-column>
<el-table-column
prop="flightCycle"
label="周期">
</el-table-column>
<el-table-column
prop="transportPrice"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px" >订舱</el-button>
</div>
</el-col>
<el-col :span="8"
style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
<h2>CZ</h2>
<el-table
:data="tableData5"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="airLine"
label="航段">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="时效">
</el-table-column>
<el-table-column
prop="flightCycle"
label="周期">
</el-table-column>
<el-table-column
prop="transportPrice"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px" >订舱</el-button>
</div>
</el-col>
<el-col :span="8"
style="height: 300px;width: 32%">
<h2>CZ</h2>
<el-table
:data="tableData6"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="airLine"
label="航段">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="时效">
</el-table-column>
<el-table-column
prop="flightCycle"
label="周期">
</el-table-column>
<el-table-column
prop="transportPrice"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px" >订舱</el-button>
</div>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="进口航线">
<span slot="label"><i class="el-icon-back"></i>进口航线</span>
</el-tab-pane>
<el-tab-pane label="空运专线">
<span slot="label"><i class="el-icon-star-off"></i>空运专线</span>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
<!-- 热门港口标题栏-->
<el-row style="margin-top: 30px">
<span style="font-size: 25px">热门港口</span>
</el-row>
<!-- 热门港口内容-->
<el-row style="background-color: #FFF;height: 300px;padding: 25px">
<el-col :span="24">
<el-tabs :tab-position="tabPosition" style="width: 100%;height: 280px;">
<el-tab-pane label="北京">
<el-table
:data="tableData7"
style="width: 100%">
<el-table-column
prop="airLine"
label="航行路线">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="运输时效">
</el-table-column>
<el-table-column
prop="deliveryAddress"
label="交货地">
</el-table-column>
<el-table-column
prop="flightCycle"
label="航班周期">
</el-table-column>
<el-table-column
fixed="right"
label=""
width="120">
<template slot-scope="scope">
<el-button
size="small" plain
type="warning"
@click="">订舱</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="上海">
<el-table
:data="tableData8"
style="width: 100%">
<el-table-column
prop="airLine"
label="航行路线">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="运输时效">
</el-table-column>
<el-table-column
prop="deliveryAddress"
label="交货地">
</el-table-column>
<el-table-column
prop="flightCycle"
label="航班周期">
</el-table-column>
<el-table-column
fixed="right"
label=""
width="120">
<template slot-scope="scope">
<el-button
size="small" plain
type="warning"
@click="">订舱</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="深圳">
<el-table
:data="tableData9"
style="width: 100%">
<el-table-column
prop="airLine"
label="航行路线">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="运输时效">
</el-table-column>
<el-table-column
prop="deliveryAddress"
label="交货地">
</el-table-column>
<el-table-column
prop="flightCycle"
label="航班周期">
</el-table-column>
<el-table-column
fixed="right"
label=""
width="120">
<template slot-scope="scope">
<el-button
size="small" plain
type="warning"
@click="">订舱</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="广州">
<el-table
:data="tableData10"
style="width: 100%">
<el-table-column
prop="airLine"
label="航行路线">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="运输时效">
</el-table-column>
<el-table-column
prop="deliveryAddress"
label="交货地">
</el-table-column>
<el-table-column
prop="flightCycle"
label="航班周期">
</el-table-column>
<el-table-column
fixed="right"
label=""
width="120">
<template slot-scope="scope">
<el-button
size="small" plain
type="warning"
@click="">订舱</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="宁波">
<el-table
:data="tableData11"
style="width: 100%">
<el-table-column
prop="airLine"
label="航行路线">
</el-table-column>
<el-table-column
prop="transportLimitation"
label="运输时效">
</el-table-column>
<el-table-column
prop="deliveryAddress"
label="交货地">
</el-table-column>
<el-table-column
prop="flightCycle"
label="航班周期">
</el-table-column>
<el-table-column
fixed="right"
label=""
width="120">
<template slot-scope="scope">
<el-button
size="small" plain
type="warning"
@click="">订舱</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
<!-- 查询工具-->
<el-row style="background-color: #FFF;height: 180px;margin-top: 60px">
<el-col :span="24">
<el-tabs :tab-position="tabPositions" style="width: 80%;height: 280px;margin: 20px">
<el-tab-pane label="机场代码查询">
<span style="font-size: 25px">机场代码查询</span>
<span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-tab-pane>
<el-tab-pane label="商品编码查询">
<span style="font-size: 25px">商品编码查询</span>
<span style="font-size: 15px">（提供海关HScode编码、对应税率、申报要素查询服务，根据海关最新政策实时更新。）</span>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-tab-pane>
<el-tab-pane label="全球港口查询">
<span style="font-size: 25px">全球港口查询</span>
<span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-tab-pane>
<el-tab-pane label="空运货物查询">
<span style="font-size: 25px">空运货物查询</span>
<span style="font-size: 15px">（提供世界各国航空公司货物追踪、货物查询服务，实时追踪最新货况。）</span>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-tab-pane>
<el-tab-pane label="快件跟踪查询">
<span style="font-size: 25px">快件跟踪查询</span>
<span style="font-size: 15px"></span>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</template>
<!-- data() {-->
<!-- return {-->
<!-- // 空运查询-->
<!-- form: {-->
<!-- airLine:undefined,-->
<!-- originStation:undefined,-->
<!-- deliveryAddress:undefined,-->
<!-- weight:undefined,-->
<!-- },-->
<!-- // 优价航线表格-->
<!-- tableData:[-->
<!-- {-->
<!-- airLine:'CGO-LUX',-->
<!-- transportLimitation:'2021-01-17-01-00',-->
<!-- deliveryAddress:'LUX',-->
<!-- flightCycle:'2',-->
<!-- transportPrice:'180',-->
<!-- }-->
<!-- ],-->
<script>
export default {
<!-- // 热门航线表格-->
<!-- tableData1:[-->
<!-- {-->
<!-- airLine:'CGO-LUX',-->
<!-- transportLimitation:'2021-01-17-01-00',-->
<!-- deliveryAddress:'LUX',-->
<!-- flightCycle:'2',-->
<!-- transportPrice:'180',-->
<!-- }-->
<!-- ],-->
<!-- tableData2:[-->
<!-- {-->
<!-- airLine:'LUX-CGO',-->
<!-- transportLimitation:'2021-01-18-12-00 ',-->
<!-- deliveryAddress:'CGO ',-->
<!-- flightCycle:'2',-->
<!-- transportPrice:'180',-->
<!-- }-->
<!-- ],-->
<!-- tableData3:[-->
<!-- {-->
<!-- airLine:'CGO-LUX',-->
<!-- transportLimitation:'2021-01-17-01-00',-->
<!-- deliveryAddress:'LUX',-->
<!-- flightCycle:'2',-->
<!-- transportPrice:'180',-->
<!-- }-->
<!-- ],-->
<!-- tableData4:[],-->
<!-- tableData5:[],-->
<!-- tableData6:[],-->
<!-- // 热门港口表格-->
<!-- tableData7:[],-->
<!-- tableData8:[],-->
<!-- tableData9:[],-->
<!-- tableData10:[],-->
<!-- tableData11:[],-->
data() {
return {
// 空运查询
form: {
airLine:undefined,
originStation:undefined,
deliveryAddress:undefined,
weight:undefined,
},
// 优价航线表格
tableData:[
{
airLine:'CGO-LUX',
transportLimitation:'2021-01-17-01-00',
deliveryAddress:'LUX',
flightCycle:'2',
transportPrice:'180',
}
],
<!-- tabPosition: 'left',-->
<!-- tabPositions: 'bottom',-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- headClass () {-->
<!-- return 'text-align: center;background:#F5F5F5;'-->
<!-- },-->
<!-- rowClass () {-->
<!-- return 'text-align: center;background:#F5F5F5;'-->
<!-- },-->
<!-- open() {-->
<!-- this.$alert('确认订舱？', '', {-->
<!-- confirmButtonText: '确定',-->
<!-- callback: action => {-->
<!-- this.$message({-->
<!-- type: 'info',-->
<!-- message: `action: ${ action }`-->
<!-- });-->
<!-- }-->
<!-- });-->
<!-- }-->
<!-- },-->
<!-- }-->
<!--</script>-->
// 热门航线表格
tableData1:[
{
airLine:'CGO-LUX',
transportLimitation:'2021-01-17-01-00',
deliveryAddress:'LUX',
flightCycle:'2',
transportPrice:'180',
}
],
tableData2:[
{
airLine:'LUX-CGO',
transportLimitation:'2021-01-18-12-00 ',
deliveryAddress:'CGO ',
flightCycle:'2',
transportPrice:'180',
}
],
tableData3:[
{
airLine:'CGO-LUX',
transportLimitation:'2021-01-17-01-00',
deliveryAddress:'LUX',
flightCycle:'2',
transportPrice:'180',
}
],
tableData4:[],
tableData5:[],
tableData6:[],
// 热门港口表格
tableData7:[],
tableData8:[],
tableData9:[],
tableData10:[],
tableData11:[],
<!--<style scoped>-->
<!-- .bg{-->
<!-- background-color: #F2F2F2;-->
<!-- width: 100%;-->
<!-- height: 850px;-->
<!-- overflow: auto;-->
tabPosition: 'left',
tabPositions: 'bottom',
}
},
methods: {
headClass () {
return 'text-align: center;background:#F5F5F5;'
},
rowClass () {
return 'text-align: center;background:#F5F5F5;'
},
open() {
this.$alert('确认订舱？', '', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}
},
}
</script>
<!-- }-->
<!-- .header{-->
<!-- font-size: 20px;-->
<!-- line-height: 120px;-->
<!-- color:#FFF;-->
<!-- }-->
<!-- .el-header{-->
<!-- background-color: #29A1F7;-->
<!-- }-->
<!-- .el-tabs{-->
<!-- width: 250px;-->
<!-- }-->
<!-- .el-menu{-->
<!-- background-color: #29A1F7;-->
<!-- font-size: 20px;-->
<!-- border-bottom-color: #29A1F7;-->
<!-- }-->
<!--</style>-->
<style scoped>
.bg{
background-color: #F2F2F2;
width: 100%;
height: 850px;
overflow: auto;
}
.header{
font-size: 20px;
line-height: 120px;
color:#FFF;
}
.el-header{
background-color: #29A1F7;
}
.el-tabs{
width: 250px;
}
.el-menu{
background-color: #29A1F7;
font-size: 20px;
border-bottom-color: #29A1F7;
}
</style>
... ...
<template>
<!--<div class="app-container">-->
<div class="app-content">
<div class="filter-container">
<el-input v-model="listQuery.awba" clearable style="width: 200px;" class="filter-item" placeholder="运单号"/>
<el-input v-model="listQuery.carrier" clearable style="width: 200px;" class="filter-item" placeholder="承运人"/>
<el-input v-model="listQuery.flightno" clearable style="width: 200px;" class="filter-item" placeholder="航班号"/>
<div class="filter-container" style="margin-top: 50px;padding-bottom: 5px">
<el-input v-model="listQuery.awba" clearable style="width: 200px;margin-right: 10px" class="filter-item" placeholder="运单号"/>
<el-input v-model="listQuery.carrier" clearable style="width: 200px;margin-right: 10px" class="filter-item" placeholder="承运人"/>
<el-input v-model="listQuery.flightno" clearable style="width: 200px;margin-right: 10px" class="filter-item" placeholder="航班号"/>
<el-date-picker v-model="listQuery.flightDate" type="date" placeholder="航班日期"
value-format="yyyy-MM-dd" class="filter-item"></el-date-picker>
</div>
<div class="filter-container">
<el-select v-model="listQuery.messageType" clearable class="filter-item" placeholder="请选择报文类型" style="width: 200px;">
<div class="filter-container" style="padding-bottom: 5px">
<el-select v-model="listQuery.messageType" clearable class="filter-item" placeholder="请选择报文类型" style="width: 200px;margin-right: 10px">
<el-option v-for="item in messageTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="listQuery.messageStatus" clearable class="filter-item" placeholder="请选择报文状态" style="width: 200px;">
<el-select v-model="listQuery.messageStatus" clearable class="filter-item" placeholder="请选择报文状态" style="width: 200px;margin-right: 10px">
<el-option v-for="item in messageStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="listQuery.customStatus" clearable class="filter-item" placeholder="请选择海关状态" style="width: 200px;">
<el-select v-model="listQuery.customStatus" clearable class="filter-item" placeholder="请选择海关状态" style="width: 200px;margin-right: 10px">
<el-option v-for="item in customStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-button class="filter-item" type="primary" @click="handleSearch">查询</el-button>
<el-button class="filter-item" style="margin-left: 10px;" type="warning"
<el-button type="warning" style="width:150px" size="medium" icon="el-icon-search" @click="handleSearch">查询</el-button>
<el-button type="primary" style="width:150px" size="medium" icon="el-icon-search"
@click="handleUpdateStatus">批量修改状态</el-button>
</div>
<div class="midSpan">
... ...
... ... @@ -63,7 +63,7 @@
</div>
<el-table :data="preData" stripe
style="border-radius: 10px 10px 0px 0px;line-height: 25px;" stripe
style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
@selection-change="handleSelectionChange" v-loading="listLoading"
default-expand-all
... ...