朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 460954fc9350eba32c804ffae91ee55a4663370f 1 个父辈 b978fff1

本地

内嵌 并排对比
正在显示 15 个修改的文件 包含 2342 行增加 和 721 行删除
@@ -24,17 +24,18 @@ module.exports = { @@ -24,17 +24,18 @@ module.exports = {
24 }, 24 },
25 dev: { 25 dev: {
26 env: require('./dev.env'), 26 env: require('./dev.env'),
27 - port: 12026, 27 + port: 12021,
28 autoOpenBrowser: true, 28 autoOpenBrowser: true,
29 assetsSubDirectory: 'static', 29 assetsSubDirectory: 'static',
30 assetsPublicPath: '/', 30 assetsPublicPath: '/',
31 proxyTable: { 31 proxyTable: {
32 '/api':{ 32 '/api':{
33 - target: 'http://192.168.1.53:12343',//设置你调用的接口域名和端口号 别忘了加http  
34 - // target: 'http://localhost:12343',//设置你调用的接口域名和端口号 别忘了加http 33 + target: 'http://192.168.1.53:12343',//设置你调用的接口域名和端口号 别忘了加http
  34 + // target: 'http://192.168.1.189:12343',//设置你调用的接口域名和端口号 别忘了加http
  35 + // target: 'http://localhost:12343',//设置你调用的接口域名和端口号 别忘了加http
35 changeOrigin: true, 36 changeOrigin: true,
36 pathRewrite: { 37 pathRewrite: {
37 - '^/api/': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可 38 + '^/api/': '/', //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
38 } 39 }
39 } 40 }
40 }, 41 },
@@ -3274,13 +3274,26 @@ @@ -3274,13 +3274,26 @@
3274 } 3274 }
3275 }, 3275 },
3276 "echarts": { 3276 "echarts": {
3277 - "version": "3.8.5",  
3278 - "resolved": "https://registry.npmjs.org/echarts/-/echarts-3.8.5.tgz",  
3279 - "integrity": "sha512-E+nnROMfCeiLeoT/fZyX8SE8mKzwkTjyemyoBF543oqjRtjTSKQAVDEihMXy4oC6pJS0tYGdMqCA2ATk8onyRg==", 3277 + "version": "5.0.2",
  3278 + "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.0.2.tgz",
  3279 + "integrity": "sha512-En0VYpc96nw2/2AZoBWPHsGi471zMublttj50kfFpYAeR4geup0Tj9iVgEXh7QYZFPnRiruDJEjcB5PXZ+BYzQ==",
3280 "requires": { 3280 "requires": {
3281 - "zrender": "3.7.4" 3281 + "tslib": "2.0.3",
  3282 + "zrender": "5.0.4"
  3283 + },
  3284 + "dependencies": {
  3285 + "tslib": {
  3286 + "version": "2.0.3",
  3287 + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
  3288 + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
  3289 + }
3282 } 3290 }
3283 }, 3291 },
  3292 + "echarts-liquidfill": {
  3293 + "version": "3.0.0",
  3294 + "resolved": "https://registry.npmjs.org/echarts-liquidfill/-/echarts-liquidfill-3.0.0.tgz",
  3295 + "integrity": "sha512-asBu62Zxpod9ZRYHweBoBvp7e+XtQbQoha19aTEJf2UptJJ2Bppcx8TdwQZnTjPM9s/yYD6Tk4/qcRqZ6s8HZA=="
  3296 + },
3284 "editorconfig": { 3297 "editorconfig": {
3285 "version": "0.15.3", 3298 "version": "0.15.3",
3286 "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz", 3299 "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -14203,9 +14216,19 @@ @@ -14203,9 +14216,19 @@
14203 } 14216 }
14204 }, 14217 },
14205 "zrender": { 14218 "zrender": {
14206 - "version": "3.7.4",  
14207 - "resolved": "https://registry.npmjs.org/zrender/-/zrender-3.7.4.tgz",  
14208 - "integrity": "sha512-5Nz7+L1wIoL0+Pp/iOP56jD6eD017qC9VRSgUBheXBiAHgOBJZ4uh4/g6e83acIwa8RKSyZf/FlceKu5ntUuxQ==" 14219 + "version": "5.0.4",
  14220 + "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.0.4.tgz",
  14221 + "integrity": "sha512-DJpy0yrHYY5CuH6vhb9IINWbjvBUe/56J8aH86Jb7O8rRPAYZ3M2E469Qf5B3EOIfM3o3aUrO5edRQfLJ+l1Qw==",
  14222 + "requires": {
  14223 + "tslib": "2.0.3"
  14224 + },
  14225 + "dependencies": {
  14226 + "tslib": {
  14227 + "version": "2.0.3",
  14228 + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
  14229 + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
  14230 + }
  14231 + }
14209 } 14232 }
14210 } 14233 }
14211 } 14234 }
@@ -13,7 +13,8 @@ @@ -13,7 +13,8 @@
13 "@xkeshi/vue-barcode": "^1.0.0", 13 "@xkeshi/vue-barcode": "^1.0.0",
14 "axios": "^0.19.0", 14 "axios": "^0.19.0",
15 "common": "^0.2.5", 15 "common": "^0.2.5",
16 - "echarts": "^3.3.2", 16 + "echarts": "^5.0.1",
  17 + "echarts-liquidfill": "^3.0.0",
17 "element-ui": "^2.13.0", 18 "element-ui": "^2.13.0",
18 "eslint": "^5.14.1", 19 "eslint": "^5.14.1",
19 "eslint-plugin-html": "^6.0.2", 20 "eslint-plugin-html": "^6.0.2",
@@ -106,4 +106,4 @@ var axois_init = { @@ -106,4 +106,4 @@ var axois_init = {
106 } 106 }
107 } 107 }
108 108
109 -export default axois_init;  
  109 +export default axois_init;
@@ -52,6 +52,8 @@ import importFWBMsg from './views/airRadioMsg/importFWBMsg.vue' @@ -52,6 +52,8 @@ import importFWBMsg from './views/airRadioMsg/importFWBMsg.vue'
52 52
53 53
54 import echarts from './views/charts/echarts.vue' 54 import echarts from './views/charts/echarts.vue'
  55 +import earthCharts from './views/charts/earthCharts.vue'
  56 +
55 import SecrityInspection from './views/staff/security_inspection.vue' 57 import SecrityInspection from './views/staff/security_inspection.vue'
56 import Key from './views/staff/key.vue' 58 import Key from './views/staff/key.vue'
57 import Maintain from './views/staff/maintain.vue' 59 import Maintain from './views/staff/maintain.vue'
@@ -101,6 +103,9 @@ import Warehouse from './views/station_manage/Warehouse.vue' @@ -101,6 +103,9 @@ import Warehouse from './views/station_manage/Warehouse.vue'
101 import Express from './views/express_system/express.vue' 103 import Express from './views/express_system/express.vue'
102 //给海龙做的货运单 104 //给海龙做的货运单
103 import Way from './views/nav3/Way.vue' 105 import Way from './views/nav3/Way.vue'
  106 +//朱总让做的网页在线客服
  107 +import Webdialog from './views/bus/Webdialog.vue'
  108 +
104 109
105 110
106 111
@@ -127,6 +132,16 @@ let routes = [ @@ -127,6 +132,16 @@ let routes = [
127 {path: '/main', component: Main, name: '首页'}, 132 {path: '/main', component: Main, name: '首页'},
128 ] 133 ]
129 }, 134 },
  135 + {
  136 + path: '/',
  137 + component: Home,
  138 + name: 'Charts',
  139 + iconCls: 'fa fa-bar-chart',
  140 + children: [
  141 + {path: '/echarts', component: echarts, name: 'echarts'},
  142 + {path: '/earthCharts', component: earthCharts, name: '统计表'}
  143 + ]
  144 + },
130 // { path: '/test', component: Main }, 145 // { path: '/test', component: Main },
131 { 146 {
132 path: '/bill', 147 path: '/bill',
@@ -134,54 +149,55 @@ let routes = [ @@ -134,54 +149,55 @@ let routes = [
134 name: '货运单', 149 name: '货运单',
135 iconCls: 'el-icon-collection', 150 iconCls: 'el-icon-collection',
136 children: [ 151 children: [
137 - {path: '/Way', component: Way, name: '货运单'} 152 + {path: '/Way', component: Way, name: '货运单'},
  153 + {path: '/Webdialog', component: Webdialog, name: '在线客服'}
  154 + ]
  155 + },
  156 + {
  157 + path: '/',
  158 + component: Home,
  159 + name: '海关货物流转',
  160 + iconCls: 'el-icon-delete-location',
  161 + children: [
  162 + { path: '/Page6', component: Page6, name: '申请列表' },
  163 + { path: '/Page7', component: Page7, name: '申请添加' },
  164 + ]
  165 + },
  166 +
  167 + {
  168 + path: '/domdep',
  169 + component: Home,
  170 + name: '订舱系统',
  171 + iconCls: 'el-icon-delete-location',
  172 + children: [
  173 + { path: '/booking', component: booking, name: '在线订舱' },
  174 + { path: '/order', component: order, name: '订舱信息' },
  175 + { path: '/airlift', component: airlift, name: '空运专线' },
138 ] 176 ]
139 }, 177 },
140 - // {  
141 - // path: '/',  
142 - // component: Home,  
143 - // name: '海关货物流转',  
144 - // iconCls: 'el-icon-delete-location',  
145 - // children: [  
146 - // { path: '/Page6', component: Page6, name: '申请列表' },  
147 - // { path: '/Page7', component: Page7, name: '申请添加' },  
148 - // ]  
149 - // },  
150 - //  
151 - // {  
152 - // path: '/domdep',  
153 - // component: Home,  
154 - // name: '订舱系统',  
155 - // iconCls: 'el-icon-delete-location',  
156 - // children: [  
157 - // { path: '/booking', component: booking, name: '在线订舱' },  
158 - // { path: '/order', component: order, name: '订舱信息' },  
159 - // { path: '/airlift', component: airlift, name: '空运专线' },  
160 - // ]  
161 - // },  
162 178
163 179
164 180
165 181
166 // 货运系统--航班预配 182 // 货运系统--航班预配
167 - // {  
168 - // path: '/domdep',  
169 - // component: Home,  
170 - // name: '国内出港',  
171 - // iconCls: 'el-icon-position',  
172 - // children: [  
173 - // { path: '/preConfiguration', component: preConfiguration, name: '航班预配' },  
174 - // { path: '/allocate', component: allocate, name: '航班配载' },  
175 - // { path: '/documents', component: documents, name: '航班文件' },  
176 - // { path: '/charge', component: charge, name: '付费处理' },  
177 - //  
178 - // // { path: '/perm', component: Perm, name: '权限管理' },  
179 - // // { path: '/log', component: LOG, name: '系统日志' },  
180 - // // { path: '/department', component: Department, name: '部门管理' },  
181 - // // { path: '/company', component: Company, name: '公司管理'},  
182 - // // { path: '/group', component: Group, name: '集团管理'}  
183 - // ]  
184 - // }, 183 + {
  184 + path: '/domdep',
  185 + component: Home,
  186 + name: '国内出港',
  187 + iconCls: 'el-icon-position',
  188 + children: [
  189 + { path: '/preConfiguration', component: preConfiguration, name: '航班预配' },
  190 + { path: '/allocate', component: allocate, name: '航班配载' },
  191 + { path: '/documents', component: documents, name: '航班文件' },
  192 + { path: '/charge', component: charge, name: '付费处理' },
  193 +
  194 + // { path: '/perm', component: Perm, name: '权限管理' },
  195 + // { path: '/log', component: LOG, name: '系统日志' },
  196 + // { path: '/department', component: Department, name: '部门管理' },
  197 + // { path: '/company', component: Company, name: '公司管理'},
  198 + // { path: '/group', component: Group, name: '集团管理'}
  199 + ]
  200 + },
185 // { 201 // {
186 // path: '/admin', 202 // path: '/admin',
187 // component: Home, 203 // component: Home,
@@ -389,15 +405,15 @@ let routes = [ @@ -389,15 +405,15 @@ let routes = [
389 // ] 405 // ]
390 // }, 406 // },
391 407
392 - {  
393 - path: '/express-system',  
394 - component: Home,  
395 - name: '快邮舱单申报',  
396 - iconCls:'el-icon-wind-power',  
397 - children:[  
398 - {path:'/express',component:Express,name:'快邮舱单申报'},  
399 - ]  
400 - }, 408 + // {
  409 + // path: '/express-system',
  410 + // component: Home,
  411 + // name: '快邮舱单申报',
  412 + // iconCls:'el-icon-wind-power',
  413 + // children:[
  414 + // {path:'/express',component:Express,name:'快邮舱单申报'},
  415 + // ]
  416 + // },
401 417
402 // { 418 // {
403 // path: '/', 419 // path: '/',
@@ -448,15 +464,7 @@ let routes = [ @@ -448,15 +464,7 @@ let routes = [
448 // // { path: '/page6', component: Page6, name: '综合楼空调站' }, 464 // // { path: '/page6', component: Page6, name: '综合楼空调站' },
449 // ] 465 // ]
450 // }, 466 // },
451 - // {  
452 - // path: '/',  
453 - // component: Home,  
454 - // name: 'Charts',  
455 - // iconCls: 'fa fa-bar-chart',  
456 - // children: [  
457 - // {path: '/echarts', component: echarts, name: 'echarts'}  
458 - // ]  
459 - // }, 467 +
460 // { 468 // {
461 // path: '*', 469 // path: '*',
462 // hidden: true, 470 // hidden: true,
  1 +<template>
  2 + <el-container>
  3 + <div class="open">
  4 + <div class="navbar">
  5 + <a href="">
  6 + <div class="demo-basic--circle" >
  7 + <div class="block"><el-avatar shape="square" :size="60" :src="circleUrl"></el-avatar></div>
  8 + </div>
  9 + </a>
  10 + <ul class="navbars">
  11 + <li>
  12 + <el-button icon="el-icon-chat-line-round" style="border: none;font-size: 30px" circle></el-button>
  13 + </li>
  14 + <li>
  15 + <el-button icon="el-icon-phone-outline" style="border: none;font-size: 30px" circle></el-button>
  16 + </li>
  17 + <li>
  18 + <el-button icon="el-icon-menu" style="border: none;font-size: 30px" circle></el-button>
  19 + </li>
  20 + <li>
  21 + <el-button icon="el-icon-user" style="border: none;font-size: 30px" circle></el-button>
  22 + </li>
  23 + </ul>
  24 + </div>
  25 + </div>
  26 +<!--最新消息栏-->
  27 + <el-aside class="sidebar">
  28 + <div class="sidebars">
  29 + <div style="margin-top: -10px">
  30 + <div style="display: inline-block"><h2>Chats</h2></div>
  31 + <ul style="display: inline-block;list-style: none;margin-left: 250px;font-size: 20px">
  32 + <li style="display: inline">
  33 + <el-button icon="el-icon-bell" style="border: none;font-size: 20px" circle></el-button>
  34 + </li>
  35 + <li style="display: inline">
  36 + <el-button icon="el-icon-share" style="border: none;font-size: 20px" circle></el-button>
  37 + </li>
  38 + </ul>
  39 + </div>
  40 + <div style="margin-top: -15px">
  41 + <el-select v-model="value" placeholder="请选择" style="width: 150px;margin-left: -10px;">
  42 + <el-option
  43 + v-for="item in options"
  44 + :key="item.value"
  45 + :label="item.label"
  46 + :value="item.value">
  47 + </el-option>
  48 + </el-select>
  49 + <el-input v-model="input1" placeholder="搜索" style="width: 220px;margin-left: 60px;">
  50 + </el-input>
  51 + <el-button icon="el-icon-search" style="margin-left: -6px;width: 50px;background-color: #F7F7F7;border-left: 0px" ></el-button>
  52 + </div>
  53 + </div>
  54 + <ul class="sidebard">
  55 + <li>
  56 + <a>
  57 + <div style="display: flex">
  58 + <div class="demo-basic--circle" >
  59 + <div class="block"><el-avatar :size="60" :src="circleUrls"></el-avatar></div>
  60 + </div>
  61 + </div>
  62 + <div style="padding-left: 10px;width: 100%">
  63 + <div class="father">
  64 + <h4 style="display: inline-block;line-height: 0px">{{name}}</h4>
  65 + <div class="sun">{{time}}</div>
  66 + <div style="background-color: rgb(245,108,108);display: inline-block;color: #FFFFFF;
  67 + width:30px;height:20px;line-height:20px;text-align:center;border-radius: 6.25rem;margin-left: 220px">
  68 + {{count}}</div>
  69 + </div>
  70 + <div style="margin: 0px;height: 30px">
  71 + <span style="margin: 0;display: inline-block;width: 85%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{content}}</span>
  72 + </div>
  73 + </div>
  74 + </a>
  75 + </li>
  76 + <li>
  77 + <a>
  78 + <div style="display: flex">
  79 + <div class="demo-basic--circle" >
  80 + <div class="block"><el-avatar :size="60" :src="circleUrls"></el-avatar></div>
  81 + </div>
  82 + </div>
  83 + <div style="padding-left: 10px;width: 100%">
  84 + <div class="father">
  85 + <h4 style="display: inline-block;line-height: 0px">{{name}}</h4>
  86 + <div class="sun">{{time}}</div>
  87 + <div style="background-color: rgb(245,108,108);display: inline-block;color: #FFFFFF;
  88 + width:30px;height:20px;line-height:20px;text-align:center;border-radius: 6.25rem;margin-left: 220px">
  89 + {{count}}</div>
  90 + </div>
  91 + <div style="margin: 0px;height: 30px">
  92 + <span style="margin: 0;display: inline-block;width: 85%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{content}}</span>
  93 + </div>
  94 + </div>
  95 + </a>
  96 + </li>
  97 + </ul>
  98 + </el-aside>
  99 + <!-- 对话框-->
  100 + <el-main class="main-message">
  101 +<!-- 对话框头部80-->
  102 + <div class="chat-body">
  103 + <!-- 当前聊天对象-->
  104 + <div style="display: inline-block">
  105 + <div style="display: table">
  106 + <el-avatar class="cell" :size="60" :src="circleUrls"></el-avatar>
  107 + <h2 class="cell" style="width: 400px;padding-left: 20px">{{name}}</h2>
  108 + </div>
  109 + </div>
  110 + <div style="display: inline-block;float: right">
  111 + <ul style="list-style: none;color: black">
  112 + <li>
  113 + <el-button icon="el-icon-search" circle></el-button>
  114 + <el-button icon="el-icon-phone-outline" circle></el-button>
  115 + <el-button icon="el-icon-share" circle></el-button>
  116 + <el-button icon="el-icon-document-remove" @click="drawer = true" circle></el-button>
  117 + </li>
  118 + </ul>
  119 + </div>
  120 +
  121 + </div>
  122 + <!-- 聊天内容-->
  123 + <div class="chat-message">
  124 + <el-row style="padding-left: 10%">
  125 + <el-col style="width: 7%">
  126 + <el-avatar :size="45" :src="circleUrls"></el-avatar>
  127 + </el-col>
  128 + <el-col style="width: 60%">
  129 + <span>{{message1}}</span>
  130 + <!-- 聊天内容功能弹框-->
  131 + <el-dropdown>
  132 + <span class="el-dropdown-link">
  133 + <i class="el-icon-more el-icon--right"></i>
  134 + </span>
  135 + <el-dropdown-menu slot="dropdown">
  136 + <el-dropdown-item icon="el-icon-download">下载</el-dropdown-item>
  137 + <el-dropdown-item icon="el-icon-right">转发</el-dropdown-item>
  138 + <el-dropdown-item icon="el-icon-star-off">收藏</el-dropdown-item>
  139 + <el-dropdown-item icon="el-icon-close">删除</el-dropdown-item>
  140 + </el-dropdown-menu>
  141 + </el-dropdown>
  142 + </el-col>
  143 + </el-row>
  144 + <el-row style="padding-left: 30%">
  145 + <el-col style="width: 75%;margin-right: 20px">
  146 + <span>{{message2}}</span>
  147 + <!-- 聊天内容功能弹框-->
  148 + <el-dropdown>
  149 + <span class="el-dropdown-link">
  150 + <i class="el-icon-more el-icon--right"></i>
  151 + </span>
  152 + <el-dropdown-menu slot="dropdown">
  153 + <el-dropdown-item icon="el-icon-back">撤回</el-dropdown-item>
  154 + <el-dropdown-item icon="el-icon-download">下载</el-dropdown-item>
  155 + <el-dropdown-item icon="el-icon-right">转发</el-dropdown-item>
  156 + <el-dropdown-item icon="el-icon-star-off">收藏</el-dropdown-item>
  157 + <el-dropdown-item icon="el-icon-close">删除</el-dropdown-item>
  158 + </el-dropdown-menu>
  159 + </el-dropdown>
  160 + </el-col>
  161 + <el-col style="width: 10%">
  162 + <el-avatar :size="45" :src="circleUrl"></el-avatar>
  163 + </el-col>
  164 + </el-row>
  165 + </div>
  166 + <!-- 输入框-->
  167 + <div style="height: 100px;border: 1px solid #e5e9f2;padding-left: 50px;position:fixed;bottom:0;width: 100%;background-color: #FFFFFF">
  168 + <div style="line-height: 100px">
  169 + <el-button icon="el-icon-plus" circle></el-button>
  170 + <el-button icon="el-icon-cherry" circle style="margin-right: 30px"></el-button>
  171 + <el-input v-model="input" placeholder="请输入内容" style="width: 700px;margin-right: 30px"></el-input>
  172 + <el-button type="primary" style="width: 120px" plain onclick="show()">发送</el-button>
  173 + </div>
  174 + </div>
  175 + </el-main>
  176 + <!-- 当前对话人信息-->
  177 + <el-drawer
  178 + title=""
  179 + :visible.sync="drawer"
  180 + :with-header="false"
  181 + style="text-align: center">
  182 + <el-row style="margin-top: 150px">
  183 + <el-col>
  184 + <div class="block"><el-avatar :size="160" :src="circleUrls"></el-avatar></div>
  185 + </el-col>
  186 + </el-row>
  187 + <el-row>
  188 + <h2>{{name}}</h2>
  189 + </el-row>
  190 + <el-row>
  191 + <span>{{company}}</span>
  192 + </el-row>
  193 + <el-row>
  194 + <span>{{tel}}</span>
  195 + </el-row>
  196 + <el-row>
  197 + <span>{{address}}</span>
  198 + </el-row>
  199 + <el-row>
  200 + <span>{{email}}</span>
  201 + </el-row>
  202 + <el-row style="margin-top: 40px">
  203 + <el-button icon="el-icon-plus" style="font-size: 35px" circle type="success"></el-button>
  204 + <el-button icon="el-icon-star-off" style="font-size: 35px" circle type="warning"></el-button>
  205 + <el-button icon="el-icon-delete" type="danger" circle style="font-size: 35px" ></el-button>
  206 + </el-row>
  207 + </el-drawer>
  208 + </el-container>
  209 +</template>
  210 +
  211 +<script>
  212 + export default {
  213 + name: "Webdialog",
  214 + data() {
  215 + return {
  216 + name:'Catherine Richardson',
  217 + time:'10:20pm',
  218 + count:12,
  219 + 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?',
  220 + input:'',
  221 + str: [],
  222 + 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?',
  223 + 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?',
  224 +
  225 + company:'海程邦达',
  226 + tel:'+01-222-364522',
  227 + address:'1134 Ridder Park Road, San Fransisco, CA 94851',
  228 + email:'catherine.richardson@gmail.com',
  229 + drawer: false,
  230 + direction: 'rtl',
  231 + circleUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3123037902,210333744&fm=26&gp=0.jpg',
  232 + 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'
  233 + }
  234 + },
  235 + methods: {
  236 + show() {
  237 + var message = document.getElementById("message2");
  238 + var input = document.getElementById("input");
  239 +
  240 + message.innerHTML = input.value;
  241 + }
  242 + }
  243 + }
  244 +</script>
  245 +
  246 +<style scoped>
  247 + .open{
  248 + display: flex;
  249 + }
  250 + .navbar{
  251 + height: 900px;
  252 + width: 110px;
  253 + background-color: #F7F7F7;
  254 + text-align: center;
  255 + padding-top: 60px;
  256 + }
  257 + .navbars{
  258 + list-style: none;
  259 + line-height: 100px;
  260 + margin-left: -35px;
  261 + }
  262 +
  263 + .navbars li a {
  264 + color: rgb(73,80,87);
  265 + font-size: 30px
  266 + }
  267 + .navbars li:hover a {
  268 + color: rgb(57,138,241);
  269 + }
  270 +
  271 + .sidebar{
  272 + width: 540px!important;
  273 + height: 900px;
  274 + position: relative;
  275 + overflow: hidden;
  276 + background-color: rgba(248,249,250,0.5);
  277 + /*overflow-y: auto;*/
  278 + /*overflow-x: hidden;*/
  279 + border: 1px solid #e5e9f2;
  280 + }
  281 + .sidebars{
  282 + background-color: #fff;
  283 + height: 120px;
  284 + padding-left: 40px;
  285 + border-bottom: 1px solid #e5e9f2;
  286 + }
  287 + .sidebard{
  288 + margin-top: 125px;
  289 + padding: 12px;
  290 + list-style: none;
  291 + position: absolute;
  292 + left: 0;
  293 + top: 0;
  294 + right: -23px;
  295 + bottom: 0;
  296 + overflow-x: hidden;
  297 + overflow-y: scroll;
  298 + }
  299 + .sidebard li a{
  300 + padding: 16px 20px;
  301 + margin-bottom: 10px;
  302 + border: 1px solid #e5e9f2;
  303 + display: flex;
  304 + border-radius: .25rem;
  305 + background-color: transparent;
  306 + }
  307 + .father{
  308 + position: relative;
  309 + display: block;
  310 + height: 30px;
  311 + margin-top: 0px
  312 + }
  313 + .sun{
  314 + position: absolute;
  315 + display: inline;
  316 + width: 50px;
  317 + top: 0px;
  318 + left: 280px;
  319 + }
  320 + .chat-body{
  321 + height: 80px;
  322 + border-bottom: 1px solid #e5e9f2;
  323 + padding: 10px 50px;
  324 + }
  325 + .chat-body div ul li .el-button{
  326 + border: none;
  327 + font-size: 20px
  328 + }
  329 + .chat-body div .cell{
  330 + display: table-cell;
  331 + vertical-align:middle;
  332 + }
  333 + .el-input__inner{
  334 + background-color: #FFFFFF!important;
  335 + }
  336 + .main-message{
  337 + background-color: #fff;
  338 + height: 900px;
  339 + border-top: 1px solid #e5e9f2;
  340 + width: 100%;
  341 + position: relative;
  342 + }
  343 + .chat-message{
  344 + border-right: 1px solid #e5e9f2;
  345 + height:660px;
  346 + padding-top: 20px;
  347 + position: absolute;
  348 + left: 0;
  349 + top: 100px;
  350 + right: -43px;
  351 + bottom: 0;
  352 + overflow-x: hidden;
  353 + overflow-y: scroll;
  354 + }
  355 +
  356 +
  357 +
  358 +</style>
  1 +<!--<!DOCTYPE html>-->
  2 +<!--<html>-->
  3 +<!--<head>-->
  4 +
  5 +<!-- <meta charset="utf-8">-->
  6 +<!-- &lt;!&ndash; 引入 echarts.js &ndash;&gt;-->
  7 +<!--&lt;!&ndash; 引入主题&ndash;&gt;-->
  8 +<!--&lt;!&ndash; <script src="https://www.runoob.com/static/js/wonderland.js"></script>&ndash;&gt;-->
  9 +<!--</head>-->
  10 +<!--<body>-->
  11 +<template>
  12 +<!-- <iframe src="https://www.thingjs.com/s/d37fa296badd5a26cb52ec26" style="margin: 0;padding: 0" height="1100px" width="100%" ></iframe>-->
  13 + <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  14 + <div style="width: 100%;height: 700px;padding-top: 30px;border:0px;margin-top: 20px;overflow:auto">
  15 + <!-- background-color: rgba(76,90,95,0.2);-->
  16 + <div id="chartColumn" style="width: 50%;height:400px;float: left;margin-right: 50px"></div>
  17 + <div id="chartBar" style="width: 40%;height:500px;float: left"></div>
  18 + <div id="chartLine" style="width: 100%;height:500px;float: left"></div>
  19 + <div id="chartPie" style="width: 45%;height:500px;float: left"></div>
  20 + <div id="chartPies" style="width: 50%;height:500px;float: left"></div>
  21 + <div id="extendShape" style="width: 45%;height:500px;float: left"></div>
  22 + <div id="" style="width: 45%;height:500px;float: left"></div>
  23 +
  24 +
  25 +
  26 + </div>
  27 +</template>
  28 +<script type="text/javascript">
  29 + // 引入基本模板
  30 + let echarts = require('echarts/lib/echarts')
  31 + // 引入柱状图组件
  32 + require('echarts/lib/chart/bar')
  33 + // 引入提示框和title组件
  34 + require('echarts/lib/component/tooltip')
  35 + require('echarts/lib/component/title')
  36 + // import * as echarts from 'echarts'
  37 + import 'echarts-liquidfill'
  38 + export default {
  39 + data() {
  40 + return {
  41 + chartColumn: null,
  42 + chartBar: null,
  43 + chartLine: null,
  44 + chartPie: null,
  45 + chartPies: null,
  46 + }
  47 + },
  48 + methods: {
  49 + drawColumnChart() {
  50 + let chartColumn = echarts.init(document.getElementById('chartColumn'));
  51 + chartColumn.setOption({
  52 + title: {
  53 + text: 'ECharts',
  54 + x:'left'
  55 + },
  56 + tooltip: {
  57 + trigger:"axis",
  58 + },
  59 + legend: {
  60 + data:['原始','理货','异常','舱单总量'],
  61 + x:'right'
  62 + },
  63 + yAxis: {
  64 + data: ["CV9703","CV9703","CV9703","CV9703","CV9703","CV9703"]
  65 + },
  66 + // color:['#ccc','red'],
  67 + xAxis: {
  68 + splitLine: {
  69 + show: false
  70 + },
  71 + axisLabel:{
  72 + formatter:"{value}"
  73 + }
  74 + },
  75 + series: [
  76 + {
  77 + name: '舱单总量',
  78 + type: 'bar',
  79 + barWidth : 25,
  80 + z:"-1",
  81 + barGap: '-100%',
  82 + data: [120, 130, 90, 80, 100, 110],
  83 + itemStyle: {
  84 + normal: {
  85 + color:"rgba(97,187,244,0.3)",
  86 + barBorderRadius:[8,9,9,8]
  87 + }
  88 + }
  89 + },
  90 + {
  91 + name: '原始',
  92 + type: 'bar',
  93 + barWidth : 25,
  94 +
  95 + stack: '广告',
  96 + data: [56, 20, 36, 40, 30, 20],
  97 + itemStyle: {
  98 + normal: {
  99 + color:"#61BBF4",
  100 + barBorderRadius:[8,9,9,8]
  101 + }
  102 + }
  103 + },
  104 + {
  105 + name: '理货',
  106 + type: 'bar',
  107 + stack: '广告',
  108 + data: [16, 40, 16, 20, 20, 10],
  109 + itemStyle: {
  110 + normal: {
  111 + color:"#FFB6C1",
  112 + barBorderRadius:[8,9,9,8]
  113 + }
  114 + }
  115 + },
  116 + {
  117 + name: '异常',
  118 + type: 'bar',
  119 + stack: '广告',
  120 + data: [56, 20, 36, 40, 30, 20],
  121 + itemStyle: {
  122 + normal: {
  123 + color:"#778899",
  124 + barBorderRadius:[8,9,9,8]
  125 + }
  126 + }
  127 + }]
  128 + });
  129 + },
  130 + drawBarChart() {
  131 + let chartBar = echarts.init(document.getElementById('chartBar'));
  132 + chartBar.setOption({
  133 + legend: {
  134 + x : 'center',
  135 + data:['5X174','5Y561','CF222','CV4481','CX2050'],
  136 + textStyle:{
  137 + color:"#000"
  138 + }
  139 + },
  140 + tooltip : {
  141 + trigger: 'axis'
  142 + },
  143 + toolbox: {
  144 + show : true,
  145 + feature : {
  146 + mark : {show: true},
  147 + dataView : {show: true, readOnly: false},
  148 + // 动态类型切换配置项
  149 + magicType : {
  150 + show: true,
  151 + type: ['pie', 'funnel'],
  152 + option: {
  153 + funnel: {
  154 + x: '25%',
  155 + width: '50%',
  156 + funnelAlign: 'left',
  157 + max: 1548
  158 + }
  159 + }
  160 + },
  161 + restore : {show: true},
  162 + saveAsImage : {show: true},
  163 + }
  164 + },
  165 + calculable : true,
  166 + series : [
  167 + {
  168 + name:'航班',
  169 + type:'pie',
  170 + radius : '55%',
  171 + tooltip : {
  172 + trigger: 'item',
  173 + formatter: '{a} <br/>{b} : {c} ({d}%)'
  174 + },
  175 + center: ['50%', '60%'],
  176 + data:[
  177 + {
  178 + value:335,
  179 + name:'5X174',
  180 + itemStyle: {
  181 + normal: {
  182 + color:"#1afffd"
  183 + }
  184 + }},
  185 + {
  186 + value:310,
  187 + name:'5Y561',
  188 + itemStyle: {
  189 + normal: {
  190 + color:"#2e7cff"
  191 + }
  192 + }},
  193 + {
  194 + value:234,
  195 + name:'CF222',
  196 + itemStyle: {
  197 + normal: {
  198 + color:"#ffcb89"
  199 + }
  200 + }},
  201 + {
  202 + value:135,
  203 + name:'CV4481',
  204 + itemStyle: {
  205 + normal: {
  206 + color:"#005ea1"
  207 + }
  208 + }},
  209 + {
  210 + value:1548,
  211 + name:'CX2050',
  212 + itemStyle: {
  213 + normal: {
  214 + color:"#0ad5ff"
  215 + }
  216 + }}
  217 + ]
  218 + }
  219 + // {
  220 + // name: '外边框',
  221 + // type: 'pie',
  222 + // clockWise: false,
  223 + // radius: ['57%', '57%'],//边框大小
  224 + // center: ['50%', '60%'],//边框位置
  225 + // data: [{
  226 + // value: 20,
  227 + // itemStyle: {
  228 + // normal: {
  229 + // borderWidth: 10,//设置边框粗细
  230 + // borderColor: 'rgb(9,37,71, 0.5)'//边框颜色
  231 + // }
  232 + // }
  233 + // }]
  234 + // },
  235 + ]
  236 + });
  237 + },
  238 + drawLineChart() {
  239 + let chartLine = echarts.init(document.getElementById('chartLine'));
  240 + chartLine.setOption({
  241 + tooltip : {
  242 + trigger: 'item'
  243 + },
  244 + grid: {
  245 + top: '16%',
  246 + bottom: '54%',
  247 + left: "50%",
  248 + containLabel: false
  249 + },
  250 + series: [
  251 + // 红色进度线
  252 + {
  253 + type: 'pie',
  254 + z: 2,
  255 + hoverAnimation: false,
  256 + // 红色环面积粗细大小
  257 + radius: ['58%', '54%'],
  258 + // 红色环位置 距离左 上
  259 + center: ["50%", "55%"],
  260 + color: [{
  261 + // 线性渐变
  262 + type: 'linear',
  263 + x: 0,
  264 + y: 0,
  265 + x2: 1,
  266 + y2: 1,
  267 + colorStops: [{
  268 + // 0处的颜色
  269 + offset: 0,
  270 + color: 'rgba(234, 40, 125, 0.01)'
  271 + }, {
  272 + // 100%处的颜色
  273 + offset: 1,
  274 + color: 'rgba(10, 40, 125, 0.5)'
  275 + }, {
  276 + // 100%处的颜色
  277 + offset: 1,
  278 + color: 'rgba(36, 61, 114, 0.5)'
  279 + }],
  280 + global: false
  281 + }],
  282 + // 标签
  283 + label: {
  284 + show: true,
  285 + formatter: '{d}%',
  286 + color:'rgba(36, 61, 114, 0.8)',
  287 + fontSize: 20
  288 + },
  289 + data: [{
  290 + value: 48,
  291 + name: '异常'
  292 + }, {
  293 + value: 100 - 48,
  294 + itemStyle: {
  295 + color: "rgba(0,0,0,0)",
  296 + borderWidth: 50
  297 + },
  298 + // 标签
  299 + label: {
  300 + show: false
  301 + },
  302 + // 悬停动画
  303 + hoverAnimation: false
  304 + }]
  305 + },
  306 + {
  307 + name: '背景线',
  308 + type: 'pie',
  309 + // 背景线旋转方向
  310 + startAngle: 130,
  311 + silent: true,
  312 + z: 1,
  313 + clockWise: true,
  314 + hoverAnimation: false,
  315 + radius: ['45%', '44%'],
  316 + center: ["50%", "55%"],
  317 + label: {
  318 + show: false
  319 + },
  320 + itemStyle: {
  321 + label: {
  322 + show: false,
  323 + },
  324 + labelLine: {
  325 + show: false
  326 + },
  327 + color: 'rgba(10, 40, 125, 0.5)',
  328 + borderWidth: 5,
  329 + },
  330 + data: [{
  331 + // 背景线长度
  332 + value: 50,
  333 + tooltip: {
  334 + show: false
  335 + },
  336 + hoverAnimation: false
  337 + }, {
  338 + // 背景线剩余部分样式
  339 + value: 100 - 80,
  340 + name: '',
  341 + itemStyle: {
  342 + color: "rgba(0,0,0,0)",
  343 + borderWidth: 0
  344 + },
  345 + tooltip: {
  346 + show: false
  347 + },
  348 + label: {
  349 + show: false
  350 + },
  351 + hoverAnimation: false
  352 + }]
  353 + },
  354 + // 蓝色进度线
  355 + {
  356 + type: 'pie',
  357 + clockWise: true,
  358 + startAngle: 300,
  359 + z: 2,
  360 + hoverAnimation: false,
  361 + radius: ['73%', '68%'],
  362 + center: ["50%", "55%"],
  363 + color: [{
  364 + type: 'linear',
  365 + x: 0,
  366 + y: 0,
  367 + x2: 1,
  368 + y2: 1,
  369 + colorStops: [{
  370 + offset: 0,
  371 + color: 'rgba(20, 139, 218,0.01)'
  372 + }, {
  373 + offset: 1,
  374 + color: 'rgba(20, 139, 218,1)'
  375 + }],
  376 + global: false
  377 + }],
  378 + label: {
  379 + show: true,
  380 + formatter: '{d}%',
  381 + color: 'rgba(20, 139, 218,1)',
  382 + fontSize: 20
  383 + },
  384 + data: [{
  385 + value:52,
  386 + name: '已完成'
  387 + }, {
  388 + value: 100 -52,
  389 + name: '',
  390 + itemStyle: {
  391 + color: "rgba(0,0,0,0)",
  392 + borderWidth: 0
  393 + },
  394 + tooltip: {
  395 + show: false
  396 + },
  397 + label: {
  398 + show: false
  399 + },
  400 + hoverAnimation: false
  401 + }]
  402 + },
  403 + {
  404 + name: '背景线',
  405 + type: 'pie',
  406 + silent: true,
  407 + startAngle:0,
  408 + z: 1,
  409 + clockWise: true,
  410 + hoverAnimation: false,
  411 + radius: ['82%', '83%'],
  412 + center: ["50%", "55%"],
  413 + label: {
  414 + show: false
  415 + },
  416 + itemStyle: {
  417 + label: {
  418 + show: false,
  419 + },
  420 + labelLine: {
  421 + show: false
  422 + },
  423 + color: 'rgba(10, 40, 125, 0.5)',
  424 + borderWidth: 5,
  425 + },
  426 + data: [{
  427 + value: 80,
  428 + tooltip: {
  429 + show: false
  430 + },
  431 + hoverAnimation: false
  432 + }, {
  433 + value: 100 - 80,
  434 + name: '',
  435 + itemStyle: {
  436 + color: "rgba(0,0,0,0)",
  437 + borderWidth: 0
  438 + },
  439 + tooltip: {
  440 + show: false
  441 + },
  442 + label: {
  443 + show: false
  444 + },
  445 + hoverAnimation: false
  446 + }]
  447 + },
  448 + ],
  449 + });
  450 + },
  451 + drawPieChart() {
  452 + let chartPie = echarts.init(document.getElementById('chartPie'));
  453 + chartPie.setOption({
  454 + tooltip: {
  455 + trigger:"axis",
  456 + },
  457 + title: [{
  458 + text: '各航班进度统计表',
  459 + x: '70%',
  460 + y: 10,
  461 + textAlign: 'right',
  462 + textStyle: {
  463 + fontSize: '30',
  464 + fontWeight: '100',
  465 + color: '#000',
  466 + },
  467 + }],
  468 + legend: {
  469 + type: 'scroll', // 设置图例翻页
  470 + icon: 'rect',
  471 + itemWidth: 12, // 图例图形宽度
  472 + itemHeight: 10,
  473 + orient: 'horizontal', // 图例横向排布
  474 + // data: title, // title是一个列表，存着图例的数据
  475 + left: 15, // 图例位置
  476 + bottom: 8,
  477 + textStyle: {
  478 + color: '#000',
  479 + fontSize: 12
  480 + },
  481 + pageIconColor: '#000',
  482 + pageTextStyle: {
  483 + color: '#000'
  484 + },
  485 + itemGap: 20,
  486 +
  487 + top: '16%',
  488 + // textStyle: {
  489 + // color: '#000'
  490 + // },
  491 + },
  492 + grid: {
  493 + left: '3%',
  494 + top: '25%',
  495 + right: '3%',
  496 + bottom: '3%',
  497 + containLabel: true
  498 + },
  499 + xAxis: {
  500 + type: 'value',
  501 + name: '',
  502 + // x轴固定在上方
  503 + position: 'top',
  504 + splitLine: {
  505 + show: false
  506 + },
  507 + // 轴上分隔断
  508 + axisTick: {
  509 + show: false
  510 + },
  511 + axisLine: {
  512 + show: false
  513 + },
  514 + axisLabel: {
  515 + // margin: 10,
  516 + textStyle: {
  517 + color: '#fff',
  518 + align: 'right'
  519 + }
  520 + }
  521 + },
  522 + // dataZoom: [//滑动条
  523 + // {
  524 + // show: false,//是否显示滑动条
  525 + // type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
  526 + // startValue: 0, // 从头开始。
  527 + // endValue: 5 // 一次性展示6个。
  528 + // }
  529 + // ],
  530 + dataZoom: [
  531 + { //x轴固定,让内容滚动
  532 + type: 'slider',
  533 + show: false,
  534 + yAxisIndex: [0],
  535 + start: 1,
  536 + end: 50,//设置X轴刻度之间的间隔(根据数据量来调整)
  537 + zoomLock: true,
  538 + },
  539 + {
  540 + type: 'inside',
  541 + yAxisIndex: [0],
  542 + start: 1,
  543 + end: 50,
  544 + zoomLock: true, //锁定区域禁止缩放
  545 + },
  546 + ],
  547 + yAxis: [
  548 + {
  549 + type: 'category',
  550 + name: '航班号',
  551 + data: ['9.CV9703', '8.CV9703', '7.CV9703', '6.CV9703','5.CV9703', '4.CV9703', '3.CV9703', '2.CV9703', '1.CV9703'],
  552 + axisLine: {
  553 + show: false
  554 + },
  555 + axisTick: {
  556 + show: false
  557 + },
  558 + splitLine: {
  559 + show: false
  560 + },
  561 + // axisTick: {
  562 + // show: false
  563 + // },
  564 + axisLabel: {
  565 + // margin: 10,
  566 + // verticalAlign: 'bottom',
  567 + textStyle: {
  568 + color: '#000',
  569 + align: 'left',
  570 + verticalAlign: "bottom",
  571 + lineHeight: 50,
  572 + },
  573 + }
  574 + },{
  575 + type : 'category',
  576 + name : '各航班总票数',
  577 + data: ['108票', '26票', '35票', '85票', '76票'],
  578 + axisLabel : {
  579 + textStyle: {
  580 + color: '#000',
  581 + align: 'left'
  582 + }
  583 + },
  584 + axisLine: {
  585 + show: false
  586 + },
  587 + splitLine: {
  588 + show: false
  589 + },
  590 + axisTick: {
  591 + show: false
  592 + },
  593 + },
  594 + ],
  595 + color: [
  596 + new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  597 + offset: 0,
  598 + color: 'rgba(20,136,204,0.8)'
  599 + },
  600 + {
  601 + offset: 1,
  602 + color: 'rgba(43,50,178,0.1)'
  603 + }
  604 + ]),
  605 + // new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
  606 + // offset: 0,
  607 + // color: '#403A3E'
  608 + // },
  609 + // {
  610 + // offset: 1,
  611 + // color: '#BE5869'
  612 + // }
  613 + // ]),
  614 + // new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
  615 + // offset: 0,
  616 + // color: '#2c3e50'
  617 + // },
  618 + // {
  619 + // offset: 1,
  620 + // color: '#bdc3c7'
  621 + // }
  622 + // ]),
  623 + ],
  624 + series: [{
  625 + name: '',
  626 + type: 'bar',
  627 + xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
  628 + yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
  629 + // data: [100, 100, 100, 100, 100, ],
  630 + barWidth: 5,
  631 + itemStyle: {
  632 + normal: {
  633 + color: 'rgba(255, 255, 255, 0)',
  634 + },
  635 + },
  636 + z: 1
  637 + },
  638 + {
  639 + name: '原始完成占比',
  640 + type: 'bar',
  641 + stack: 'Tik Tok',
  642 + barWidth: 25,
  643 + itemStyle: {
  644 + shadowColor: '#000',
  645 + shadowBlur: 10,
  646 + shadowOffsetY: 0,
  647 + shadowOffsetX: 0,
  648 + borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  649 + offset: 0,
  650 + color: 'rgba(20,136,204,0.6)'
  651 + },
  652 + {
  653 + offset: 1,
  654 + color: 'rgba(43,50,178,0.2)'
  655 + }
  656 + ]),
  657 + borderWidth: 1,
  658 + },
  659 + label: {
  660 + normal: {
  661 + show: true,
  662 + position: 'insideRight',
  663 + offset: [-20, 0],
  664 + formatter: '{c}%',
  665 + textStyle: {
  666 + align: 'center',
  667 + baseline: 'middle',
  668 + fontSize: 14,
  669 + fontWeight: '400',
  670 + color: '#fff',
  671 + textShadowColor:'#000',
  672 + textShadowBlur:'0',
  673 + textShadowOffsetX:1,
  674 + textShadowOffsetY:1,
  675 + }
  676 + },
  677 + },
  678 + data: [29, 19, 26, 44,29, 19, 26, 44, 20, ]
  679 + },
  680 + {
  681 + name: '理货完成占比',
  682 + type: 'bar',
  683 + stack: 'Tik Tok',
  684 + barWidth: 25,
  685 + itemStyle: {
  686 + shadowColor: '#000',
  687 + shadowBlur: 10,
  688 + shadowOffsetY: 0,
  689 + shadowOffsetX: 0,
  690 + borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  691 + offset: 0,
  692 + color: 'rgba(20,136,204,0.6)'
  693 + },
  694 + {
  695 + offset: 1,
  696 + color: 'rgba(43,50,178,0.2)'
  697 + }
  698 + ]),
  699 + borderWidth: 1,
  700 + },
  701 + label: {
  702 + normal: {
  703 + show: true,
  704 + position: 'insideRight',
  705 + offset: [-20, 0],
  706 + formatter: '{c}%',
  707 + textStyle: {
  708 + align: 'center',
  709 + baseline: 'middle',
  710 + fontSize: 14,
  711 + fontWeight: '400',
  712 + color: '#fff',
  713 + textShadowColor:'#000',
  714 + textShadowBlur:'0',
  715 + textShadowOffsetX:1,
  716 + textShadowOffsetY:1,
  717 + }
  718 + },
  719 + },
  720 + data: [38, 36, 44, 33,38, 36, 44, 33, 20, ]
  721 + },
  722 + {
  723 + name: '未完成占比',
  724 + type: 'bar',
  725 + stack: 'Tik Tok',
  726 + barWidth: 25,
  727 + itemStyle: {
  728 + shadowColor: '#000',
  729 + shadowBlur: 10,
  730 + shadowOffsetY: 0,
  731 + shadowOffsetX: 0,
  732 + borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  733 + offset: 0,
  734 + color: 'rgba(20,136,204,0.6)'
  735 + },
  736 + {
  737 + offset: 1,
  738 + color: 'rgba(43,50,178,0.2)'
  739 + }
  740 + ]),
  741 + borderWidth: 1,
  742 + },
  743 + label: {
  744 + normal: {
  745 + show: true,
  746 + position: 'insideRight',
  747 + offset: [-20, 0],
  748 + formatter: '{c}%',
  749 + textStyle: {
  750 + align: 'center',
  751 + baseline: 'middle',
  752 + fontSize: 14,
  753 + fontWeight: '400',
  754 + color: '#fff',
  755 + textShadowColor:'#000',
  756 + textShadowBlur:'0',
  757 + textShadowOffsetX:1,
  758 + textShadowOffsetY:1,
  759 + }
  760 + },
  761 + },
  762 + data: [33, 45, 30, 23,33, 45, 30, 23, 60, ]
  763 + },
  764 + ]
  765 + });
  766 + },
  767 + drawPiesCharts() {
  768 + let chartPies = echarts.init(document.getElementById('chartPies'));
  769 + chartPies.setOption({
  770 + // backgroundColor: '#050038',
  771 + tooltip: {
  772 + trigger:"item",
  773 + },
  774 + title: {
  775 + text: '今日航班进度',
  776 + textAlign: 'left',
  777 + textStyle: {
  778 + fontWeight: 'normal',
  779 + fontSize: 25,
  780 + color: 'rgb(97, 142, 205)'
  781 + }
  782 + },
  783 + series: [{
  784 + type: 'liquidFill',
  785 + // 内部小球的大小
  786 + radius: '80%',
  787 + center: ['50%', '50%'],
  788 + // data个数代表波浪数及大小
  789 + data: [0.3, 0.3, 0.3, 0.2],
  790 + backgroundStyle: {
  791 + borderWidth: 1,
  792 + color: 'rgb(2,0,0,0.02)'
  793 + },
  794 + label: {
  795 + normal: {
  796 + formatter: (0.2 * 100).toFixed(1) + '%',
  797 + textStyle: {
  798 + fontSize: 40
  799 + }
  800 + }
  801 + },
  802 + outline: {
  803 + show: false,
  804 + }
  805 + },
  806 + {
  807 + "type": "pie",
  808 + "center": ["50%", "50%"],
  809 + "radius": ["80%", "82%"],
  810 + "hoverAnimation": false,
  811 + // "data": [{
  812 + // "name": "",
  813 + // "value": 500,
  814 + // labelLine: {
  815 + // show: false
  816 + // },
  817 + // itemStyle: {
  818 + // color: '#5886f0'
  819 + // },
  820 + // emphasis: {
  821 + // labelLine: {
  822 + // show: false
  823 + // },
  824 + // itemStyle: {
  825 + // color: '#5886f0'
  826 + // },
  827 + // }
  828 + // },
  829 + // // {
  830 + // // //画中间的图标
  831 + // // "name": "",
  832 + // // "value": 4,
  833 + // // labelLine: {
  834 + // // show: false
  835 + // // },
  836 + // // itemStyle: {
  837 + // // color: '#ffffff',
  838 + // // "normal": {
  839 + // // "color": "#5886f0",
  840 + // // "borderColor": "#5886f0",
  841 + // // "borderWidth": 20,
  842 + // // borderRadius: '20%'
  843 + // // },
  844 + // // },
  845 + // // label: {
  846 + // //
  847 + // // borderRadius: '100%'
  848 + // // },
  849 + // // emphasis: {
  850 + // // labelLine: {
  851 + // // show: false
  852 + // // },
  853 + // // itemStyle: {
  854 + // // color: '#5886f0'
  855 + // // },
  856 + // // }
  857 + // //
  858 + // // },
  859 + // // {
  860 + // // // 解决圆点过大后续部分显示明显的问题
  861 + // // "name": "",
  862 + // // "value": 4,
  863 + // // labelLine: {
  864 + // // show: false
  865 + // // },
  866 + // // itemStyle: {
  867 + // // color: '#5886f0'
  868 + // // },
  869 + // // emphasis: {
  870 + // // labelLine: {
  871 + // // show: false
  872 + // // },
  873 + // // itemStyle: {
  874 + // // color: '#5886f0'
  875 + // // },
  876 + // // }
  877 + // // },
  878 + // // {
  879 + // // //画剩余的刻度圆环
  880 + // // "name": "",
  881 + // // "value": 600,
  882 + // // itemStyle: {
  883 + // // color: 'rgb(255,0,255,0.1)'
  884 + // // },
  885 + // // "label": {
  886 + // // show: false
  887 + // // },
  888 + // // labelLine: {
  889 + // // show: false
  890 + // // },
  891 + // // emphasis: {
  892 + // // labelLine: {
  893 + // // show: false
  894 + // // },
  895 + // // itemStyle: {
  896 + // // color: 'rgba(255,255,255,0)'
  897 + // // },
  898 + // // }
  899 + // // }
  900 + // ]
  901 + }
  902 +
  903 + ]
  904 + });
  905 + },
  906 + drawPiedCharts() {
  907 + let extendShape = echarts.init(document.getElementById('extendShape'));
  908 + const CubeLeft = echarts.graphic.extendShape({
  909 + shape: {
  910 + x: 0,
  911 + y: 0
  912 + },
  913 + buildPath: function(ctx, shape) {
  914 + const xAxisPoint = shape.xAxisPoint
  915 + const c0 = [shape.x, shape.y]
  916 + const c1 = [shape.x - 9, shape.y - 9]
  917 + const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
  918 + const c3 = [xAxisPoint[0], xAxisPoint[1]]
  919 + ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
  920 + }
  921 + })
  922 + const CubeRight = echarts.graphic.extendShape({
  923 + shape: {
  924 + x: 0,
  925 + y: 0
  926 + },
  927 + buildPath: function(ctx, shape) {
  928 + const xAxisPoint = shape.xAxisPoint
  929 + const c1 = [shape.x, shape.y]
  930 + const c2 = [xAxisPoint[0], xAxisPoint[1]]
  931 + const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
  932 + const c4 = [shape.x + 18, shape.y - 9]
  933 + ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
  934 + }
  935 + })
  936 + const CubeTop = echarts.graphic.extendShape({
  937 + shape: {
  938 + x: 0,
  939 + y: 0
  940 + },
  941 + buildPath: function(ctx, shape) {
  942 + const c1 = [shape.x, shape.y]
  943 + const c2 = [shape.x + 18, shape.y - 9]
  944 + const c3 = [shape.x + 9, shape.y - 18]
  945 + const c4 = [shape.x - 9, shape.y - 9]
  946 + ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
  947 + }
  948 + })
  949 + echarts.graphic.registerShape('CubeLeft', CubeLeft)
  950 + echarts.graphic.registerShape('CubeRight', CubeRight)
  951 + echarts.graphic.registerShape('CubeTop', CubeTop)
  952 + const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
  953 + const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]
  954 + extendShape.setOption({
  955 + tooltip: {
  956 + trigger:"axis",
  957 + },
  958 + title: {
  959 + text: '',
  960 + top: 32,
  961 + left: 18,
  962 + textStyle: {
  963 + color: '#00F6FF',
  964 + fontSize: 24
  965 + }
  966 + },
  967 + // title: [{
  968 + // text: '各航班进度统计表',
  969 + // x: '50%',
  970 + // y: 10,
  971 + // textAlign: 'center',
  972 + // textStyle: {
  973 + // fontSize: '30',
  974 + // fontWeight: '100',
  975 + // color: '#000',
  976 + // textAlign: 'center',
  977 + // },
  978 + // }, ],
  979 + grid: {
  980 + left: 20,
  981 + right: 40,
  982 + bottom: '19%',
  983 + top: 107,
  984 + containLabel: true
  985 + },
  986 + xAxis: {
  987 + type: 'category',
  988 + data: ['德州', '德城区', '陵城区', '禹城市', '乐陵市', '临邑县',
  989 + '平原县', '夏津县', '武城县', '庆云县', '宁津县', '齐河县'
  990 + ],
  991 + axisLine: {
  992 + show: true,
  993 + lineStyle: {
  994 + color: 'black'
  995 + }
  996 + },
  997 + offset: 20,
  998 + axisTick: {
  999 + show: false,
  1000 + length: 9,
  1001 + alignWithLabel: true,
  1002 + lineStyle: {
  1003 + color: '#7DFFFD'
  1004 + }
  1005 + },
  1006 + axisLabel: {
  1007 + fontSize: 10
  1008 + }
  1009 + },
  1010 + yAxis: {
  1011 + type: 'value',
  1012 + axisLine: {
  1013 + show: true,
  1014 + lineStyle: {
  1015 + color: 'black'
  1016 + }
  1017 + },
  1018 + splitLine: {
  1019 + show: false
  1020 + },
  1021 + axisTick: {
  1022 + show: false
  1023 + },
  1024 + axisLabel: {
  1025 + fontSize: 16
  1026 + },
  1027 + boundaryGap: ['20%', '20%']
  1028 + },
  1029 + series: [{
  1030 + name:'总量',
  1031 + type: 'custom',
  1032 + renderItem: function(params, api) {
  1033 + const location = api.coord([api.value(0), api.value(1)])
  1034 + return {
  1035 + type: 'group',
  1036 + children: [{
  1037 + type: 'CubeLeft',
  1038 + shape: {
  1039 + api,
  1040 + xValue: api.value(0),
  1041 + yValue: api.value(1),
  1042 + x: location[0],
  1043 + y: location[1],
  1044 + xAxisPoint: api.coord([api.value(0), 0])
  1045 + },
  1046 + style: {
  1047 + fill: 'rgba(7,29,97,.6)'
  1048 + }
  1049 + }, {
  1050 + type: 'CubeRight',
  1051 + shape: {
  1052 + api,
  1053 + xValue: api.value(0),
  1054 + yValue: api.value(1),
  1055 + x: location[0],
  1056 + y: location[1],
  1057 + xAxisPoint: api.coord([api.value(0), 0])
  1058 + },
  1059 + style: {
  1060 + fill: 'rgba(10,35,108,.7)'
  1061 + }
  1062 + }, {
  1063 + type: 'CubeTop',
  1064 + shape: {
  1065 + api,
  1066 + xValue: api.value(0),
  1067 + yValue: api.value(1),
  1068 + x: location[0],
  1069 + y: location[1],
  1070 + xAxisPoint: api.coord([api.value(0), 0])
  1071 + },
  1072 + style: {
  1073 + fill: 'rgba(11,42,106,.8)'
  1074 + }
  1075 + }]
  1076 + }
  1077 + },
  1078 + data: MAX
  1079 + }, {
  1080 + name:'占有',
  1081 + type: 'custom',
  1082 + renderItem: (params, api) => {
  1083 + const location = api.coord([api.value(0), api.value(1)])
  1084 + return {
  1085 + type: 'group',
  1086 + children: [{
  1087 + type: 'CubeLeft',
  1088 + shape: {
  1089 + api,
  1090 + xValue: api.value(0),
  1091 + yValue: api.value(1),
  1092 + x: location[0],
  1093 + y: location[1],
  1094 + xAxisPoint: api.coord([api.value(0), 0])
  1095 + },
  1096 + style: {
  1097 + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1098 + offset: 0,
  1099 + color: '#3B80E2'
  1100 + },
  1101 + {
  1102 + offset: 1,
  1103 + color: '#49BEE5'
  1104 + }
  1105 + ])
  1106 + }
  1107 + }, {
  1108 + type: 'CubeRight',
  1109 + shape: {
  1110 + api,
  1111 + xValue: api.value(0),
  1112 + yValue: api.value(1),
  1113 + x: location[0],
  1114 + y: location[1],
  1115 + xAxisPoint: api.coord([api.value(0), 0])
  1116 + },
  1117 + style: {
  1118 + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1119 + offset: 0,
  1120 + color: '#3B80E2'
  1121 + },
  1122 + {
  1123 + offset: 1,
  1124 + color: '#49BEE5'
  1125 + }
  1126 + ])
  1127 + }
  1128 + }, {
  1129 + type: 'CubeTop',
  1130 + shape: {
  1131 + api,
  1132 + xValue: api.value(0),
  1133 + yValue: api.value(1),
  1134 + x: location[0],
  1135 + y: location[1],
  1136 + xAxisPoint: api.coord([api.value(0), 0])
  1137 + },
  1138 + style: {
  1139 + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1140 + offset: 0,
  1141 + color: '#3B80E2'
  1142 + },
  1143 + {
  1144 + offset: 1,
  1145 + color: '#49BEE5'
  1146 + }
  1147 + ])
  1148 + }
  1149 + }]
  1150 + }
  1151 + },
  1152 + data: VALUE
  1153 + },
  1154 + // {
  1155 + // type: 'bar',
  1156 + // label: {
  1157 + // normal: {
  1158 + // show: true,
  1159 + // position: 'top',
  1160 + // formatter: (e) => {
  1161 + // switch (e.name) {
  1162 + // case '10kV线路':
  1163 + // return VALUE[0]
  1164 + // case '公用配变':
  1165 + // return VALUE[1]
  1166 + // case '35kV主变':
  1167 + // return VALUE[2]
  1168 + // case '水':
  1169 + //
  1170 + // }
  1171 + // },
  1172 + // fontSize: 16,
  1173 + // color: 'black',
  1174 + // offset: [4, -25]
  1175 + // }
  1176 + // },
  1177 + // itemStyle: {
  1178 + // color: 'transparent'
  1179 + // },
  1180 + // data: MAX
  1181 + // }
  1182 + ],
  1183 + shape: {
  1184 + x: 0,
  1185 + y: 0
  1186 + },
  1187 + buildPath: function(ctx, shape) {
  1188 + const xAxisPoint = shape.xAxisPoint
  1189 + const c0 = [shape.x, shape.y]
  1190 + const c1 = [shape.x - 9, shape.y - 9]
  1191 + const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
  1192 + const c3 = [xAxisPoint[0], xAxisPoint[1]]
  1193 + ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
  1194 + },
  1195 + }
  1196 + )
  1197 + },
  1198 +
  1199 + drawCharts() {
  1200 + this.drawColumnChart()
  1201 + this.drawBarChart()
  1202 + this.drawLineChart()
  1203 + this.drawPieChart()
  1204 + this.drawPiesCharts()
  1205 + this.drawPiedCharts()
  1206 +
  1207 +
  1208 + },
  1209 + },
  1210 +
  1211 + mounted: function () {
  1212 + this.drawCharts();
  1213 + },
  1214 + /*updated: function () {
  1215 + this.drawCharts()
  1216 + }*/
  1217 + }
  1218 +
  1219 +
  1220 +</script>
  1221 +<!--</body>-->
  1222 +<!--</html>-->
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 </el-col> 16 </el-col>
17 17
18 <!--列表--> 18 <!--列表-->
19 - <el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;" 19 + <el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;height:600px;overflow: scroll"
20 row-key="permissionId" 20 row-key="permissionId"
21 border 21 border
22 :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 22 :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@@ -418,6 +418,7 @@ @@ -418,6 +418,7 @@
418 </script> 418 </script>
419 419
420 <style rel="stylesheet/scss" lang="scss"> 420 <style rel="stylesheet/scss" lang="scss">
  421 +
421 .el-drawer.rtl { 422 .el-drawer.rtl {
422 overflow: scroll 423 overflow: scroll
423 } 424 }
@@ -428,4 +429,4 @@ @@ -428,4 +429,4 @@
428 } 429 }
429 430
430 431
431 -</style>  
  432 +</style>
@@ -39,7 +39,8 @@ @@ -39,7 +39,8 @@
39 ref="multipleTable" 39 ref="multipleTable"
40 :data="tableData" 40 :data="tableData"
41 tooltip-effect="dark" 41 tooltip-effect="dark"
42 - style="width: 100%" 42 + style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
  43 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
43 @selection-change="handleSelectionChange"> 44 @selection-change="handleSelectionChange">
44 <el-table-column 45 <el-table-column
45 type="selection" 46 type="selection"
@@ -70,7 +71,8 @@ @@ -70,7 +71,8 @@
70 ref="multipleTable" 71 ref="multipleTable"
71 :data="tableData1" 72 :data="tableData1"
72 tooltip-effect="dark" 73 tooltip-effect="dark"
73 - style="width: 100%" 74 + style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
  75 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
74 @selection-change="handleSelectionChange"> 76 @selection-change="handleSelectionChange">
75 <el-table-column 77 <el-table-column
76 type="selection" 78 type="selection"
@@ -476,7 +478,8 @@ @@ -476,7 +478,8 @@
476 ref="multipleTable" 478 ref="multipleTable"
477 :data="tableData2" 479 :data="tableData2"
478 tooltip-effect="dark" 480 tooltip-effect="dark"
479 - style="width: 100%" 481 + style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
  482 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
480 @selection-change="handleSelectionChange"> 483 @selection-change="handleSelectionChange">
481 <el-table-column 484 <el-table-column
482 type="selection" 485 type="selection"
@@ -566,4 +569,4 @@ @@ -566,4 +569,4 @@
566 } 569 }
567 } 570 }
568 } 571 }
569 -</script>  
  572 +</script>
@@ -133,4 +133,4 @@ @@ -133,4 +133,4 @@
133 133
134 <style scoped> 134 <style scoped>
135 135
136 -</style>  
  136 +</style>
@@ -38,8 +38,9 @@ @@ -38,8 +38,9 @@
38 <el-table 38 <el-table
39 ref="multipleTable" 39 ref="multipleTable"
40 :data="tableData" 40 :data="tableData"
  41 + style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
  42 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
41 tooltip-effect="dark" 43 tooltip-effect="dark"
42 - style="width: 100%"  
43 @selection-change="handleSelectionChange"> 44 @selection-change="handleSelectionChange">
44 <el-table-column 45 <el-table-column
45 type="selection" 46 type="selection"
@@ -59,7 +60,7 @@ @@ -59,7 +60,7 @@
59 </el-table-column> 60 </el-table-column>
60 <el-table-column 61 <el-table-column
61 prop="volume" 62 prop="volume"
62 - label="体积"> 63 + label="体积">`
63 </el-table-column> 64 </el-table-column>
64 <el-table-column 65 <el-table-column
65 prop="product" 66 prop="product"
@@ -283,7 +284,8 @@ @@ -283,7 +284,8 @@
283 ref="multipleTable" 284 ref="multipleTable"
284 :data="tableData2" 285 :data="tableData2"
285 tooltip-effect="dark" 286 tooltip-effect="dark"
286 - style="width: 100%" 287 + style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
  288 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
287 @selection-change="handleSelectionChange"> 289 @selection-change="handleSelectionChange">
288 <el-table-column 290 <el-table-column
289 prop="type" 291 prop="type"
@@ -428,4 +430,4 @@ @@ -428,4 +430,4 @@
428 } 430 }
429 } 431 }
430 } 432 }
431 -</script>  
  433 +</script>
1 -<!--<template>-->  
2 -<!-- <div class="bg">-->  
3 -<!-- <el-container>-->  
4 -<!--&lt;!&ndash; 主要区域&ndash;&gt;-->  
5 -<!-- <el-main>-->  
6 -<!--&lt;!&ndash; 空运查询内容&ndash;&gt;-->  
7 -<!-- <el-row style="margin-top: 30px">-->  
8 -<!-- <el-col :span="10" style="margin-right: 10px;background-color: #FFF;">-->  
9 -<!-- <div style="height: 600px;">-->  
10 -<!-- <div style="width: 100%;height: 80px;border-bottom: solid 2px #29A1F7;">-->  
11 -<!-- <el-col :span="15" style="margin-left: 0px;margin-top: 20px;">-->  
12 -<!-- <span style="font-size: 25px;margin-left: 50px">空运查询</span>-->  
13 -<!-- </el-col>-->  
14 -<!-- <el-col :span="8" style="margin-top: 23px;">-->  
15 -<!-- <span style="font-size: 17px">约计3000条航线数据</span>-->  
16 -<!-- </el-col>-->  
17 -<!-- </div>-->  
18 -<!-- <el-row>-->  
19 -<!-- <el-form ref="form" :model="form" label-width="80px" style="font-size: 50px;" >-->  
20 -<!-- <el-form-item label="航程方向" >-->  
21 -<!-- <el-radio-group v-model="form.airLine">-->  
22 -<!-- <el-radio style="padding-left: 20px" label="出口"></el-radio>-->  
23 -<!-- <el-radio label="进口"></el-radio>-->  
24 -<!-- </el-radio-group>-->  
25 -<!-- </el-form-item>-->  
26 -<!-- <el-form-item label="起运地">-->  
27 -<!-- <el-select style="width: 320px" v-model="form.originStation" placeholder="起运地">-->  
28 -<!-- <el-option label="CGO" value="shanghai"></el-option>-->  
29 -<!-- <el-option label="LUX" value="beijing"></el-option>-->  
30 -<!-- </el-select>-->  
31 -<!-- </el-form-item>-->  
32 -<!-- <el-form-item label="目的地">-->  
33 -<!-- <el-select style="width: 320px" v-model="form.deliveryAddress" placeholder="目的地">-->  
34 -<!-- <el-option label="CGO" value="shanghai"></el-option>-->  
35 -<!-- <el-option label="LUX" value="beijing"></el-option>-->  
36 -<!-- </el-select>-->  
37 -<!-- </el-form-item>-->  
38 -<!-- <el-form-item label="货物重量">-->  
39 -<!-- <el-input style="width: 320px" v-model="form.weight" placeholder="单位：KG"></el-input>-->  
40 -<!-- </el-form-item>-->  
41 -<!-- <div style="padding-left: 150px">-->  
42 -<!-- <el-button style="background-color: #F18F4C;color: #FFF">查价下单</el-button>-->  
43 -<!-- </div>-->  
44 -<!-- </el-form>-->  
45 -<!-- <div style="width: 100%;height: 200px;margin-top: 30px;padding-left: 50px;border-top: dashed 2px #D5D5D5;">-->  
46 -<!-- <p>-->  
47 -<!-- <span><i class="el-icon-phone" style="color: #29A1F7;padding-right: 5px"></i>一键订舱，方便快捷</span>-->  
48 -<!-- </p>-->  
49 -<!-- <p>-->  
50 -<!-- <span><i class="el-icon-edit-outline" style="color: #29A1F7;padding-right: 5px"></i>数据准确，专有团队维护</span>-->  
51 -<!-- </p>-->  
52 -<!-- <span><i class="el-icon-location-information" style="color: #29A1F7;padding-right: 5px"></i>货物在线跟踪</span>-->  
53 -<!-- </div>-->  
54 -<!-- </el-row>-->  
55 -<!-- </div>-->  
56 -<!-- </el-col>-->  
57 -<!--&lt;!&ndash; 广告位&ndash;&gt;-->  
58 -<!-- <el-col :span="13" style="margin-right: 0px;background-color: rgba(41,161,247,0.1);float: right;">-->  
59 -<!-- <div style="height: 600px;width: 500px">--> 1 +<template>
  2 + <div class="bg">
  3 + <el-container>
  4 +<!-- 主要区域-->
  5 + <el-main>
  6 +<!-- 空运查询内容-->
  7 + <el-row style="margin-top: 30px">
  8 + <el-col :span="10" style="margin-right: 10px;background-color: #FFF;">
  9 + <div style="height: 600px;">
  10 + <div style="width: 100%;height: 80px;border-bottom: solid 2px #29A1F7;">
  11 + <el-col :span="15" style="margin-left: 0px;margin-top: 20px;">
  12 + <span style="font-size: 25px;margin-left: 50px">空运查询</span>
  13 + </el-col>
  14 + <el-col :span="8" style="margin-top: 23px;">
  15 + <span style="font-size: 17px">约计3000条航线数据</span>
  16 + </el-col>
  17 + </div>
  18 + <el-row>
  19 + <el-form ref="form" :model="form" label-width="80px" style="font-size: 50px;" >
  20 + <el-form-item label="航程方向" >
  21 + <el-radio-group v-model="form.airLine">
  22 + <el-radio style="padding-left: 20px" label="出口"></el-radio>
  23 + <el-radio label="进口"></el-radio>
  24 + </el-radio-group>
  25 + </el-form-item>
  26 + <el-form-item label="起运地">
  27 + <el-select style="width: 320px" v-model="form.originStation" placeholder="起运地">
  28 + <el-option label="CGO" value="shanghai"></el-option>
  29 + <el-option label="LUX" value="beijing"></el-option>
  30 + </el-select>
  31 + </el-form-item>
  32 + <el-form-item label="目的地">
  33 + <el-select style="width: 320px" v-model="form.deliveryAddress" placeholder="目的地">
  34 + <el-option label="CGO" value="shanghai"></el-option>
  35 + <el-option label="LUX" value="beijing"></el-option>
  36 + </el-select>
  37 + </el-form-item>
  38 + <el-form-item label="货物重量">
  39 + <el-input style="width: 320px" v-model="form.weight" placeholder="单位：KG"></el-input>
  40 + </el-form-item>
  41 + <div style="padding-left: 150px">
  42 + <el-button style="background-color: #F18F4C;color: #FFF">查价下单</el-button>
  43 + </div>
  44 + </el-form>
  45 + <div style="width: 100%;height: 200px;margin-top: 30px;padding-left: 50px;border-top: dashed 2px #D5D5D5;">
  46 + <p>
  47 + <span><i class="el-icon-phone" style="color: #29A1F7;padding-right: 5px"></i>一键订舱，方便快捷</span>
  48 + </p>
  49 + <p>
  50 + <span><i class="el-icon-edit-outline" style="color: #29A1F7;padding-right: 5px"></i>数据准确，专有团队维护</span>
  51 + </p>
  52 + <span><i class="el-icon-location-information" style="color: #29A1F7;padding-right: 5px"></i>货物在线跟踪</span>
  53 + </div>
  54 + </el-row>
  55 + </div>
  56 + </el-col>
  57 +<!-- 广告位-->
  58 + <el-col :span="13" style="margin-right: 0px;background-color: rgba(41,161,247,0.1);float: right;">
  59 + <div style="height: 600px;width: 500px">
  60 + <img src="" width="700px" height="600px"/>
60 <!-- <img src="./air.jpg" width="700px" height="600px"/>--> 61 <!-- <img src="./air.jpg" width="700px" height="600px"/>-->
61 -<!-- </div>-->  
62 -<!-- </el-col>-->  
63 -<!-- </el-row>-->  
64 -<!--&lt;!&ndash; 优价航线标题栏&ndash;&gt;-->  
65 -<!-- <el-row style="margin-top: 30px">-->  
66 -<!-- <span style="font-size: 25px">优价航线</span>-->  
67 -<!-- </el-row>-->  
68 -<!--&lt;!&ndash; 优价航线内容&ndash;&gt;-->  
69 -<!-- <el-row style="background-color: #FFF;height: 300px;">-->  
70 -<!-- <el-table-->  
71 -<!-- :data="tableData"-->  
72 -<!-- style="width: 100%">-->  
73 -<!-- <el-table-column-->  
74 -<!-- prop="airLine"-->  
75 -<!-- label="航行路线">-->  
76 -<!-- </el-table-column>-->  
77 -<!-- <el-table-column-->  
78 -<!-- prop="transportLimitation"-->  
79 -<!-- label="运输时效">-->  
80 -<!-- </el-table-column>-->  
81 -<!-- <el-table-column-->  
82 -<!-- prop="deliveryAddress"-->  
83 -<!-- label="交货地">-->  
84 -<!-- </el-table-column>-->  
85 -<!-- <el-table-column-->  
86 -<!-- prop="flightCycle"-->  
87 -<!-- label="航班周期">-->  
88 -<!-- </el-table-column>-->  
89 -<!-- <el-table-column-->  
90 -<!-- prop="transportPrice"-->  
91 -<!-- label="最低价格">-->  
92 -<!-- </el-table-column>-->  
93 -<!-- <el-table-column-->  
94 -<!-- fixed="right"-->  
95 -<!-- label=""-->  
96 -<!-- width="120">-->  
97 -<!-- <template slot-scope="scope">-->  
98 -<!-- <el-button-->  
99 -<!-- size="small" plain-->  
100 -<!-- type="warning"-->  
101 -<!-- @click="open">订舱</el-button>-->  
102 -<!-- </template>-->  
103 -<!-- </el-table-column>-->  
104 -<!-- </el-table>-->  
105 -<!-- </el-row>-->  
106 -<!--&lt;!&ndash; 热门航线标题栏&ndash;&gt;-->  
107 -<!-- <el-row style="margin-top: 30px">-->  
108 -<!-- <span style="font-size: 25px">热门航线</span>-->  
109 -<!-- </el-row>-->  
110 -<!--&lt;!&ndash; 热门航线内容&ndash;&gt;-->  
111 -<!-- <el-row style="background-color: #FFF;height: 680px;">-->  
112 -<!-- <el-col :span="24">-->  
113 -<!-- <el-tabs type="border-card" style="width: 100%;height: 680px" stretch="true">-->  
114 -<!-- <el-tab-pane>-->  
115 -<!-- <span slot="label"><i class="el-icon-right"></i>出口航线</span>-->  
116 -<!-- <el-row style="height: 300px;margin-top: 0px">-->  
117 -<!-- <el-col :span="8"-->  
118 -<!-- style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">-->  
119 -<!-- <h2>CV</h2>-->  
120 -<!-- <el-table-->  
121 -<!-- :data="tableData1"-->  
122 -<!-- :header-cell-style="headClass"-->  
123 -<!-- :cell-style="rowClass"-->  
124 -<!-- style="width: 100%;background-color: #F5F5F5">-->  
125 -<!-- <el-table-column-->  
126 -<!-- prop="airLine"-->  
127 -<!-- label="航段">-->  
128 -<!-- </el-table-column>-->  
129 -<!-- <el-table-column-->  
130 -<!-- prop="transportLimitation"-->  
131 -<!-- label="时效">-->  
132 -<!-- </el-table-column>-->  
133 -<!-- <el-table-column-->  
134 -<!-- prop="flightCycle"-->  
135 -<!-- label="周期">-->  
136 -<!-- </el-table-column>-->  
137 -<!-- <el-table-column-->  
138 -<!-- prop="transportPrice"-->  
139 -<!-- label="航运价">-->  
140 -<!-- </el-table-column>-->  
141 -<!-- </el-table>-->  
142 -<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->  
143 -<!-- <div style="text-align: center;margin-top: 6px">-->  
144 -<!-- <el-button type="warning" plain style="width: 120px" >订舱</el-button>-->  
145 -<!-- </div>-->  
146 -<!-- </el-col>-->  
147 -<!-- <el-col :span="8"-->  
148 -<!-- style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">-->  
149 -<!-- <h2>CV</h2>-->  
150 -<!-- <el-table-->  
151 -<!-- :data="tableData2"-->  
152 -<!-- :header-cell-style="headClass"-->  
153 -<!-- :cell-style="rowClass"-->  
154 -<!-- style="width: 100%;background-color: #F5F5F5">-->  
155 -<!-- <el-table-column-->  
156 -<!-- prop="airLine"-->  
157 -<!-- label="航段">-->  
158 -<!-- </el-table-column>-->  
159 -<!-- <el-table-column-->  
160 -<!-- prop="transportLimitation"-->  
161 -<!-- label="时效">-->  
162 -<!-- </el-table-column>-->  
163 -<!-- <el-table-column-->  
164 -<!-- prop="flightCycle"-->  
165 -<!-- label="周期">-->  
166 -<!-- </el-table-column>-->  
167 -<!-- <el-table-column-->  
168 -<!-- prop="transportPrice"-->  
169 -<!-- label="航运价">-->  
170 -<!-- </el-table-column>-->  
171 -<!-- </el-table>-->  
172 -<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->  
173 -<!-- <div style="text-align: center;margin-top: 6px">-->  
174 -<!-- <el-button type="warning" plain style="width: 120px" >订舱</el-button>-->  
175 -<!-- </div>-->  
176 -<!-- </el-col>-->  
177 -<!-- <el-col :span="8"-->  
178 -<!-- style="border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%">-->  
179 -<!-- <h2>CV</h2>-->  
180 -<!-- <el-table-->  
181 -<!-- :data="tableData3"-->  
182 -<!-- :header-cell-style="headClass"-->  
183 -<!-- :cell-style="rowClass"-->  
184 -<!-- style="width: 100%;background-color: #F5F5F5">-->  
185 -<!-- <el-table-column-->  
186 -<!-- prop="airLine"-->  
187 -<!-- label="航段">-->  
188 -<!-- </el-table-column>-->  
189 -<!-- <el-table-column-->  
190 -<!-- prop="transportLimitation"-->  
191 -<!-- label="时效">-->  
192 -<!-- </el-table-column>-->  
193 -<!-- <el-table-column-->  
194 -<!-- prop="flightCycle"-->  
195 -<!-- label="周期">-->  
196 -<!-- </el-table-column>-->  
197 -<!-- <el-table-column-->  
198 -<!-- prop="transportPrice"-->  
199 -<!-- label="航运价">-->  
200 -<!-- </el-table-column>-->  
201 -<!-- </el-table>-->  
202 -<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->  
203 -<!-- <div style="text-align: center;margin-top: 6px">-->  
204 -<!-- <el-button type="warning" plain style="width: 120px">订舱</el-button>-->  
205 -<!-- </div>-->  
206 -<!-- </el-col>-->  
207 -<!-- </el-row>-->  
208 -<!-- <el-row style="height: 300px;margin-top: 0px">-->  
209 -<!-- <el-col :span="8"-->  
210 -<!-- style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">-->  
211 -<!-- <h2>CZ</h2>-->  
212 -<!-- <el-table-->  
213 -<!-- :data="tableData4"-->  
214 -<!-- :header-cell-style="headClass"-->  
215 -<!-- :cell-style="rowClass"-->  
216 -<!-- style="width: 100%;background-color: #F5F5F5">-->  
217 -<!-- <el-table-column-->  
218 -<!-- prop="airLine"-->  
219 -<!-- label="航段">-->  
220 -<!-- </el-table-column>-->  
221 -<!-- <el-table-column-->  
222 -<!-- prop="transportLimitation"-->  
223 -<!-- label="时效">-->  
224 -<!-- </el-table-column>-->  
225 -<!-- <el-table-column-->  
226 -<!-- prop="flightCycle"-->  
227 -<!-- label="周期">-->  
228 -<!-- </el-table-column>-->  
229 -<!-- <el-table-column-->  
230 -<!-- prop="transportPrice"-->  
231 -<!-- label="航运价">-->  
232 -<!-- </el-table-column>-->  
233 -<!-- </el-table>-->  
234 -<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->  
235 -<!-- <div style="text-align: center;margin-top: 6px">-->  
236 -<!-- <el-button type="warning" plain style="width: 120px" >订舱</el-button>-->  
237 -<!-- </div>-->  
238 -<!-- </el-col>-->  
239 -<!-- <el-col :span="8"-->  
240 -<!-- style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">-->  
241 -<!-- <h2>CZ</h2>-->  
242 -<!-- <el-table-->  
243 -<!-- :data="tableData5"-->  
244 -<!-- :header-cell-style="headClass"-->  
245 -<!-- :cell-style="rowClass"-->  
246 -<!-- style="width: 100%;background-color: #F5F5F5">-->  
247 -<!-- <el-table-column-->  
248 -<!-- prop="airLine"-->  
249 -<!-- label="航段">-->  
250 -<!-- </el-table-column>-->  
251 -<!-- <el-table-column-->  
252 -<!-- prop="transportLimitation"-->  
253 -<!-- label="时效">-->  
254 -<!-- </el-table-column>-->  
255 -<!-- <el-table-column-->  
256 -<!-- prop="flightCycle"-->  
257 -<!-- label="周期">-->  
258 -<!-- </el-table-column>-->  
259 -<!-- <el-table-column-->  
260 -<!-- prop="transportPrice"-->  
261 -<!-- label="航运价">-->  
262 -<!-- </el-table-column>-->  
263 -<!-- </el-table>-->  
264 -<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->  
265 -<!-- <div style="text-align: center;margin-top: 6px">-->  
266 -<!-- <el-button type="warning" plain style="width: 120px" >订舱</el-button>-->  
267 -<!-- </div>-->  
268 -<!-- </el-col>-->  
269 -<!-- <el-col :span="8"-->  
270 -<!-- style="height: 300px;width: 32%">-->  
271 -<!-- <h2>CZ</h2>-->  
272 -<!-- <el-table-->  
273 -<!-- :data="tableData6"-->  
274 -<!-- :header-cell-style="headClass"-->  
275 -<!-- :cell-style="rowClass"-->  
276 -<!-- style="width: 100%;background-color: #F5F5F5">-->  
277 -<!-- <el-table-column-->  
278 -<!-- prop="airLine"-->  
279 -<!-- label="航段">-->  
280 -<!-- </el-table-column>-->  
281 -<!-- <el-table-column-->  
282 -<!-- prop="transportLimitation"-->  
283 -<!-- label="时效">-->  
284 -<!-- </el-table-column>-->  
285 -<!-- <el-table-column-->  
286 -<!-- prop="flightCycle"-->  
287 -<!-- label="周期">-->  
288 -<!-- </el-table-column>-->  
289 -<!-- <el-table-column-->  
290 -<!-- prop="transportPrice"-->  
291 -<!-- label="航运价">-->  
292 -<!-- </el-table-column>-->  
293 -<!-- </el-table>-->  
294 -<!-- <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>-->  
295 -<!-- <div style="text-align: center;margin-top: 6px">-->  
296 -<!-- <el-button type="warning" plain style="width: 120px" >订舱</el-button>-->  
297 -<!-- </div>-->  
298 -<!-- </el-col>-->  
299 -<!-- </el-row>-->  
300 -<!-- </el-tab-pane>-->  
301 -<!-- <el-tab-pane label="进口航线">-->  
302 -<!-- <span slot="label"><i class="el-icon-back"></i>进口航线</span>-->  
303 -<!-- </el-tab-pane>-->  
304 -<!-- <el-tab-pane label="空运专线">-->  
305 -<!-- <span slot="label"><i class="el-icon-star-off"></i>空运专线</span>-->  
306 -<!-- </el-tab-pane>-->  
307 -<!-- </el-tabs>-->  
308 -<!-- </el-col>-->  
309 -<!-- </el-row>-->  
310 -<!--&lt;!&ndash; 热门港口标题栏&ndash;&gt;-->  
311 -<!-- <el-row style="margin-top: 30px">-->  
312 -<!-- <span style="font-size: 25px">热门港口</span>-->  
313 -<!-- </el-row>-->  
314 -<!--&lt;!&ndash; 热门港口内容&ndash;&gt;-->  
315 -<!-- <el-row style="background-color: #FFF;height: 300px;padding: 25px">-->  
316 -<!-- <el-col :span="24">-->  
317 -<!-- <el-tabs :tab-position="tabPosition" style="width: 100%;height: 280px;">-->  
318 -<!-- <el-tab-pane label="北京">-->  
319 -<!-- <el-table-->  
320 -<!-- :data="tableData7"-->  
321 -<!-- style="width: 100%">-->  
322 -<!-- <el-table-column-->  
323 -<!-- prop="airLine"-->  
324 -<!-- label="航行路线">-->  
325 -<!-- </el-table-column>-->  
326 -<!-- <el-table-column-->  
327 -<!-- prop="transportLimitation"-->  
328 -<!-- label="运输时效">-->  
329 -<!-- </el-table-column>-->  
330 -<!-- <el-table-column-->  
331 -<!-- prop="deliveryAddress"-->  
332 -<!-- label="交货地">-->  
333 -<!-- </el-table-column>-->  
334 -<!-- <el-table-column-->  
335 -<!-- prop="flightCycle"-->  
336 -<!-- label="航班周期">-->  
337 -<!-- </el-table-column>-->  
338 -<!-- <el-table-column-->  
339 -<!-- fixed="right"-->  
340 -<!-- label=""-->  
341 -<!-- width="120">-->  
342 -<!-- <template slot-scope="scope">-->  
343 -<!-- <el-button-->  
344 -<!-- size="small" plain-->  
345 -<!-- type="warning"-->  
346 -<!-- @click="">订舱</el-button>-->  
347 -<!-- </template>-->  
348 -<!-- </el-table-column>-->  
349 -<!-- </el-table>-->  
350 -<!-- </el-tab-pane>-->  
351 -<!-- <el-tab-pane label="上海">-->  
352 -<!-- <el-table-->  
353 -<!-- :data="tableData8"-->  
354 -<!-- style="width: 100%">-->  
355 -<!-- <el-table-column-->  
356 -<!-- prop="airLine"-->  
357 -<!-- label="航行路线">-->  
358 -<!-- </el-table-column>-->  
359 -<!-- <el-table-column-->  
360 -<!-- prop="transportLimitation"-->  
361 -<!-- label="运输时效">-->  
362 -<!-- </el-table-column>-->  
363 -<!-- <el-table-column-->  
364 -<!-- prop="deliveryAddress"-->  
365 -<!-- label="交货地">-->  
366 -<!-- </el-table-column>-->  
367 -<!-- <el-table-column-->  
368 -<!-- prop="flightCycle"-->  
369 -<!-- label="航班周期">-->  
370 -<!-- </el-table-column>-->  
371 -<!-- <el-table-column-->  
372 -<!-- fixed="right"-->  
373 -<!-- label=""-->  
374 -<!-- width="120">-->  
375 -<!-- <template slot-scope="scope">-->  
376 -<!-- <el-button-->  
377 -<!-- size="small" plain-->  
378 -<!-- type="warning"-->  
379 -<!-- @click="">订舱</el-button>-->  
380 -<!-- </template>-->  
381 -<!-- </el-table-column>-->  
382 -<!-- </el-table>-->  
383 -<!-- </el-tab-pane>-->  
384 -<!-- <el-tab-pane label="深圳">-->  
385 -<!-- <el-table-->  
386 -<!-- :data="tableData9"-->  
387 -<!-- style="width: 100%">-->  
388 -<!-- <el-table-column-->  
389 -<!-- prop="airLine"-->  
390 -<!-- label="航行路线">-->  
391 -<!-- </el-table-column>-->  
392 -<!-- <el-table-column-->  
393 -<!-- prop="transportLimitation"-->  
394 -<!-- label="运输时效">-->  
395 -<!-- </el-table-column>-->  
396 -<!-- <el-table-column-->  
397 -<!-- prop="deliveryAddress"-->  
398 -<!-- label="交货地">-->  
399 -<!-- </el-table-column>-->  
400 -<!-- <el-table-column-->  
401 -<!-- prop="flightCycle"-->  
402 -<!-- label="航班周期">-->  
403 -<!-- </el-table-column>-->  
404 -<!-- <el-table-column-->  
405 -<!-- fixed="right"-->  
406 -<!-- label=""-->  
407 -<!-- width="120">-->  
408 -<!-- <template slot-scope="scope">-->  
409 -<!-- <el-button-->  
410 -<!-- size="small" plain-->  
411 -<!-- type="warning"-->  
412 -<!-- @click="">订舱</el-button>-->  
413 -<!-- </template>-->  
414 -<!-- </el-table-column>-->  
415 -<!-- </el-table>-->  
416 -<!-- </el-tab-pane>-->  
417 -<!-- <el-tab-pane label="广州">-->  
418 -<!-- <el-table-->  
419 -<!-- :data="tableData10"-->  
420 -<!-- style="width: 100%">-->  
421 -<!-- <el-table-column-->  
422 -<!-- prop="airLine"-->  
423 -<!-- label="航行路线">-->  
424 -<!-- </el-table-column>-->  
425 -<!-- <el-table-column-->  
426 -<!-- prop="transportLimitation"-->  
427 -<!-- label="运输时效">-->  
428 -<!-- </el-table-column>-->  
429 -<!-- <el-table-column-->  
430 -<!-- prop="deliveryAddress"-->  
431 -<!-- label="交货地">-->  
432 -<!-- </el-table-column>-->  
433 -<!-- <el-table-column-->  
434 -<!-- prop="flightCycle"-->  
435 -<!-- label="航班周期">-->  
436 -<!-- </el-table-column>-->  
437 -<!-- <el-table-column-->  
438 -<!-- fixed="right"-->  
439 -<!-- label=""-->  
440 -<!-- width="120">-->  
441 -<!-- <template slot-scope="scope">-->  
442 -<!-- <el-button-->  
443 -<!-- size="small" plain-->  
444 -<!-- type="warning"-->  
445 -<!-- @click="">订舱</el-button>-->  
446 -<!-- </template>-->  
447 -<!-- </el-table-column>-->  
448 -<!-- </el-table>-->  
449 -<!-- </el-tab-pane>-->  
450 -<!-- <el-tab-pane label="宁波">-->  
451 -<!-- <el-table-->  
452 -<!-- :data="tableData11"-->  
453 -<!-- style="width: 100%">-->  
454 -<!-- <el-table-column-->  
455 -<!-- prop="airLine"-->  
456 -<!-- label="航行路线">-->  
457 -<!-- </el-table-column>-->  
458 -<!-- <el-table-column-->  
459 -<!-- prop="transportLimitation"-->  
460 -<!-- label="运输时效">-->  
461 -<!-- </el-table-column>-->  
462 -<!-- <el-table-column-->  
463 -<!-- prop="deliveryAddress"-->  
464 -<!-- label="交货地">-->  
465 -<!-- </el-table-column>-->  
466 -<!-- <el-table-column-->  
467 -<!-- prop="flightCycle"-->  
468 -<!-- label="航班周期">-->  
469 -<!-- </el-table-column>-->  
470 -<!-- <el-table-column-->  
471 -<!-- fixed="right"-->  
472 -<!-- label=""-->  
473 -<!-- width="120">-->  
474 -<!-- <template slot-scope="scope">-->  
475 -<!-- <el-button-->  
476 -<!-- size="small" plain-->  
477 -<!-- type="warning"-->  
478 -<!-- @click="">订舱</el-button>-->  
479 -<!-- </template>-->  
480 -<!-- </el-table-column>-->  
481 -<!-- </el-table>-->  
482 -<!-- </el-tab-pane>-->  
483 -<!-- </el-tabs>-->  
484 -<!-- </el-col>-->  
485 -<!-- </el-row>-->  
486 -<!--&lt;!&ndash; 查询工具&ndash;&gt;-->  
487 -<!-- <el-row style="background-color: #FFF;height: 180px;margin-top: 60px">-->  
488 -<!-- <el-col :span="24">-->  
489 -<!-- <el-tabs :tab-position="tabPositions" style="width: 80%;height: 280px;margin: 20px">-->  
490 -<!-- <el-tab-pane label="机场代码查询">-->  
491 -<!-- <span style="font-size: 25px">机场代码查询</span>-->  
492 -<!-- <span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>-->  
493 -<!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->  
494 -<!-- </el-tab-pane>-->  
495 -<!-- <el-tab-pane label="商品编码查询">-->  
496 -<!-- <span style="font-size: 25px">商品编码查询</span>-->  
497 -<!-- <span style="font-size: 15px">（提供海关HScode编码、对应税率、申报要素查询服务，根据海关最新政策实时更新。）</span>-->  
498 -<!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->  
499 -<!-- </el-tab-pane>-->  
500 -<!-- <el-tab-pane label="全球港口查询">-->  
501 -<!-- <span style="font-size: 25px">全球港口查询</span>-->  
502 -<!-- <span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>-->  
503 -<!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->  
504 -<!-- </el-tab-pane>-->  
505 -<!-- <el-tab-pane label="空运货物查询">-->  
506 -<!-- <span style="font-size: 25px">空运货物查询</span>-->  
507 -<!-- <span style="font-size: 15px">（提供世界各国航空公司货物追踪、货物查询服务，实时追踪最新货况。）</span>-->  
508 -<!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->  
509 -<!-- </el-tab-pane>-->  
510 -<!-- <el-tab-pane label="快件跟踪查询">-->  
511 -<!-- <span style="font-size: 25px">快件跟踪查询</span>-->  
512 -<!-- <span style="font-size: 15px"></span>-->  
513 -<!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->  
514 -<!-- </el-tab-pane>-->  
515 -<!-- </el-tabs>-->  
516 -<!-- </el-col>-->  
517 -<!-- </el-row>-->  
518 -<!-- </el-main>-->  
519 -<!-- </el-container>-->  
520 -<!-- </div>-->  
521 -<!--</template>-->  
522 62
523 -<!--<script>-->  
524 -<!-- export default {--> 63 + </div>
  64 + </el-col>
  65 + </el-row>
  66 +<!-- 优价航线标题栏-->
  67 + <el-row style="margin-top: 30px">
  68 + <span style="font-size: 25px">优价航线</span>
  69 + </el-row>
  70 +<!-- 优价航线内容-->
  71 + <el-row style="background-color: #FFF;height: 300px;">
  72 + <el-table
  73 + :data="tableData"
  74 + style="width: 100%">
  75 + <el-table-column
  76 + prop="airLine"
  77 + label="航行路线">
  78 + </el-table-column>
  79 + <el-table-column
  80 + prop="transportLimitation"
  81 + label="运输时效">
  82 + </el-table-column>
  83 + <el-table-column
  84 + prop="deliveryAddress"
  85 + label="交货地">
  86 + </el-table-column>
  87 + <el-table-column
  88 + prop="flightCycle"
  89 + label="航班周期">
  90 + </el-table-column>
  91 + <el-table-column
  92 + prop="transportPrice"
  93 + label="最低价格">
  94 + </el-table-column>
  95 + <el-table-column
  96 + fixed="right"
  97 + label=""
  98 + width="120">
  99 + <template slot-scope="scope">
  100 + <el-button
  101 + size="small" plain
  102 + type="warning"
  103 + @click="open">订舱</el-button>
  104 + </template>
  105 + </el-table-column>
  106 + </el-table>
  107 + </el-row>
  108 +<!-- 热门航线标题栏-->
  109 + <el-row style="margin-top: 30px">
  110 + <span style="font-size: 25px">热门航线</span>
  111 + </el-row>
  112 +<!-- 热门航线内容-->
  113 + <el-row style="background-color: #FFF;height: 680px;">
  114 + <el-col :span="24">
  115 + <el-tabs type="border-card" style="width: 100%;height: 680px" stretch="true">
  116 + <el-tab-pane>
  117 + <span slot="label"><i class="el-icon-right"></i>出口航线</span>
  118 + <el-row style="height: 300px;margin-top: 0px">
  119 + <el-col :span="8"
  120 + style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
  121 + <h2>CV</h2>
  122 + <el-table
  123 + :data="tableData1"
  124 + :header-cell-style="headClass"
  125 + :cell-style="rowClass"
  126 + style="width: 100%;background-color: #F5F5F5">
  127 + <el-table-column
  128 + prop="airLine"
  129 + label="航段">
  130 + </el-table-column>
  131 + <el-table-column
  132 + prop="transportLimitation"
  133 + label="时效">
  134 + </el-table-column>
  135 + <el-table-column
  136 + prop="flightCycle"
  137 + label="周期">
  138 + </el-table-column>
  139 + <el-table-column
  140 + prop="transportPrice"
  141 + label="航运价">
  142 + </el-table-column>
  143 + </el-table>
  144 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  145 + <div style="text-align: center;margin-top: 6px">
  146 + <el-button type="warning" plain style="width: 120px" >订舱</el-button>
  147 + </div>
  148 + </el-col>
  149 + <el-col :span="8"
  150 + style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
  151 + <h2>CV</h2>
  152 + <el-table
  153 + :data="tableData2"
  154 + :header-cell-style="headClass"
  155 + :cell-style="rowClass"
  156 + style="width: 100%;background-color: #F5F5F5">
  157 + <el-table-column
  158 + prop="airLine"
  159 + label="航段">
  160 + </el-table-column>
  161 + <el-table-column
  162 + prop="transportLimitation"
  163 + label="时效">
  164 + </el-table-column>
  165 + <el-table-column
  166 + prop="flightCycle"
  167 + label="周期">
  168 + </el-table-column>
  169 + <el-table-column
  170 + prop="transportPrice"
  171 + label="航运价">
  172 + </el-table-column>
  173 + </el-table>
  174 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  175 + <div style="text-align: center;margin-top: 6px">
  176 + <el-button type="warning" plain style="width: 120px" >订舱</el-button>
  177 + </div>
  178 + </el-col>
  179 + <el-col :span="8"
  180 + style="border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%">
  181 + <h2>CV</h2>
  182 + <el-table
  183 + :data="tableData3"
  184 + :header-cell-style="headClass"
  185 + :cell-style="rowClass"
  186 + style="width: 100%;background-color: #F5F5F5">
  187 + <el-table-column
  188 + prop="airLine"
  189 + label="航段">
  190 + </el-table-column>
  191 + <el-table-column
  192 + prop="transportLimitation"
  193 + label="时效">
  194 + </el-table-column>
  195 + <el-table-column
  196 + prop="flightCycle"
  197 + label="周期">
  198 + </el-table-column>
  199 + <el-table-column
  200 + prop="transportPrice"
  201 + label="航运价">
  202 + </el-table-column>
  203 + </el-table>
  204 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  205 + <div style="text-align: center;margin-top: 6px">
  206 + <el-button type="warning" plain style="width: 120px">订舱</el-button>
  207 + </div>
  208 + </el-col>
  209 + </el-row>
  210 + <el-row style="height: 300px;margin-top: 0px">
  211 + <el-col :span="8"
  212 + style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
  213 + <h2>CZ</h2>
  214 + <el-table
  215 + :data="tableData4"
  216 + :header-cell-style="headClass"
  217 + :cell-style="rowClass"
  218 + style="width: 100%;background-color: #F5F5F5">
  219 + <el-table-column
  220 + prop="airLine"
  221 + label="航段">
  222 + </el-table-column>
  223 + <el-table-column
  224 + prop="transportLimitation"
  225 + label="时效">
  226 + </el-table-column>
  227 + <el-table-column
  228 + prop="flightCycle"
  229 + label="周期">
  230 + </el-table-column>
  231 + <el-table-column
  232 + prop="transportPrice"
  233 + label="航运价">
  234 + </el-table-column>
  235 + </el-table>
  236 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  237 + <div style="text-align: center;margin-top: 6px">
  238 + <el-button type="warning" plain style="width: 120px" >订舱</el-button>
  239 + </div>
  240 + </el-col>
  241 + <el-col :span="8"
  242 + style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
  243 + <h2>CZ</h2>
  244 + <el-table
  245 + :data="tableData5"
  246 + :header-cell-style="headClass"
  247 + :cell-style="rowClass"
  248 + style="width: 100%;background-color: #F5F5F5">
  249 + <el-table-column
  250 + prop="airLine"
  251 + label="航段">
  252 + </el-table-column>
  253 + <el-table-column
  254 + prop="transportLimitation"
  255 + label="时效">
  256 + </el-table-column>
  257 + <el-table-column
  258 + prop="flightCycle"
  259 + label="周期">
  260 + </el-table-column>
  261 + <el-table-column
  262 + prop="transportPrice"
  263 + label="航运价">
  264 + </el-table-column>
  265 + </el-table>
  266 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  267 + <div style="text-align: center;margin-top: 6px">
  268 + <el-button type="warning" plain style="width: 120px" >订舱</el-button>
  269 + </div>
  270 + </el-col>
  271 + <el-col :span="8"
  272 + style="height: 300px;width: 32%">
  273 + <h2>CZ</h2>
  274 + <el-table
  275 + :data="tableData6"
  276 + :header-cell-style="headClass"
  277 + :cell-style="rowClass"
  278 + style="width: 100%;background-color: #F5F5F5">
  279 + <el-table-column
  280 + prop="airLine"
  281 + label="航段">
  282 + </el-table-column>
  283 + <el-table-column
  284 + prop="transportLimitation"
  285 + label="时效">
  286 + </el-table-column>
  287 + <el-table-column
  288 + prop="flightCycle"
  289 + label="周期">
  290 + </el-table-column>
  291 + <el-table-column
  292 + prop="transportPrice"
  293 + label="航运价">
  294 + </el-table-column>
  295 + </el-table>
  296 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  297 + <div style="text-align: center;margin-top: 6px">
  298 + <el-button type="warning" plain style="width: 120px" >订舱</el-button>
  299 + </div>
  300 + </el-col>
  301 + </el-row>
  302 + </el-tab-pane>
  303 + <el-tab-pane label="进口航线">
  304 + <span slot="label"><i class="el-icon-back"></i>进口航线</span>
  305 + </el-tab-pane>
  306 + <el-tab-pane label="空运专线">
  307 + <span slot="label"><i class="el-icon-star-off"></i>空运专线</span>
  308 + </el-tab-pane>
  309 + </el-tabs>
  310 + </el-col>
  311 + </el-row>
  312 +<!-- 热门港口标题栏-->
  313 + <el-row style="margin-top: 30px">
  314 + <span style="font-size: 25px">热门港口</span>
  315 + </el-row>
  316 +<!-- 热门港口内容-->
  317 + <el-row style="background-color: #FFF;height: 300px;padding: 25px">
  318 + <el-col :span="24">
  319 + <el-tabs :tab-position="tabPosition" style="width: 100%;height: 280px;">
  320 + <el-tab-pane label="北京">
  321 + <el-table
  322 + :data="tableData7"
  323 + style="width: 100%">
  324 + <el-table-column
  325 + prop="airLine"
  326 + label="航行路线">
  327 + </el-table-column>
  328 + <el-table-column
  329 + prop="transportLimitation"
  330 + label="运输时效">
  331 + </el-table-column>
  332 + <el-table-column
  333 + prop="deliveryAddress"
  334 + label="交货地">
  335 + </el-table-column>
  336 + <el-table-column
  337 + prop="flightCycle"
  338 + label="航班周期">
  339 + </el-table-column>
  340 + <el-table-column
  341 + fixed="right"
  342 + label=""
  343 + width="120">
  344 + <template slot-scope="scope">
  345 + <el-button
  346 + size="small" plain
  347 + type="warning"
  348 + @click="">订舱</el-button>
  349 + </template>
  350 + </el-table-column>
  351 + </el-table>
  352 + </el-tab-pane>
  353 + <el-tab-pane label="上海">
  354 + <el-table
  355 + :data="tableData8"
  356 + style="width: 100%">
  357 + <el-table-column
  358 + prop="airLine"
  359 + label="航行路线">
  360 + </el-table-column>
  361 + <el-table-column
  362 + prop="transportLimitation"
  363 + label="运输时效">
  364 + </el-table-column>
  365 + <el-table-column
  366 + prop="deliveryAddress"
  367 + label="交货地">
  368 + </el-table-column>
  369 + <el-table-column
  370 + prop="flightCycle"
  371 + label="航班周期">
  372 + </el-table-column>
  373 + <el-table-column
  374 + fixed="right"
  375 + label=""
  376 + width="120">
  377 + <template slot-scope="scope">
  378 + <el-button
  379 + size="small" plain
  380 + type="warning"
  381 + @click="">订舱</el-button>
  382 + </template>
  383 + </el-table-column>
  384 + </el-table>
  385 + </el-tab-pane>
  386 + <el-tab-pane label="深圳">
  387 + <el-table
  388 + :data="tableData9"
  389 + style="width: 100%">
  390 + <el-table-column
  391 + prop="airLine"
  392 + label="航行路线">
  393 + </el-table-column>
  394 + <el-table-column
  395 + prop="transportLimitation"
  396 + label="运输时效">
  397 + </el-table-column>
  398 + <el-table-column
  399 + prop="deliveryAddress"
  400 + label="交货地">
  401 + </el-table-column>
  402 + <el-table-column
  403 + prop="flightCycle"
  404 + label="航班周期">
  405 + </el-table-column>
  406 + <el-table-column
  407 + fixed="right"
  408 + label=""
  409 + width="120">
  410 + <template slot-scope="scope">
  411 + <el-button
  412 + size="small" plain
  413 + type="warning"
  414 + @click="">订舱</el-button>
  415 + </template>
  416 + </el-table-column>
  417 + </el-table>
  418 + </el-tab-pane>
  419 + <el-tab-pane label="广州">
  420 + <el-table
  421 + :data="tableData10"
  422 + style="width: 100%">
  423 + <el-table-column
  424 + prop="airLine"
  425 + label="航行路线">
  426 + </el-table-column>
  427 + <el-table-column
  428 + prop="transportLimitation"
  429 + label="运输时效">
  430 + </el-table-column>
  431 + <el-table-column
  432 + prop="deliveryAddress"
  433 + label="交货地">
  434 + </el-table-column>
  435 + <el-table-column
  436 + prop="flightCycle"
  437 + label="航班周期">
  438 + </el-table-column>
  439 + <el-table-column
  440 + fixed="right"
  441 + label=""
  442 + width="120">
  443 + <template slot-scope="scope">
  444 + <el-button
  445 + size="small" plain
  446 + type="warning"
  447 + @click="">订舱</el-button>
  448 + </template>
  449 + </el-table-column>
  450 + </el-table>
  451 + </el-tab-pane>
  452 + <el-tab-pane label="宁波">
  453 + <el-table
  454 + :data="tableData11"
  455 + style="width: 100%">
  456 + <el-table-column
  457 + prop="airLine"
  458 + label="航行路线">
  459 + </el-table-column>
  460 + <el-table-column
  461 + prop="transportLimitation"
  462 + label="运输时效">
  463 + </el-table-column>
  464 + <el-table-column
  465 + prop="deliveryAddress"
  466 + label="交货地">
  467 + </el-table-column>
  468 + <el-table-column
  469 + prop="flightCycle"
  470 + label="航班周期">
  471 + </el-table-column>
  472 + <el-table-column
  473 + fixed="right"
  474 + label=""
  475 + width="120">
  476 + <template slot-scope="scope">
  477 + <el-button
  478 + size="small" plain
  479 + type="warning"
  480 + @click="">订舱</el-button>
  481 + </template>
  482 + </el-table-column>
  483 + </el-table>
  484 + </el-tab-pane>
  485 + </el-tabs>
  486 + </el-col>
  487 + </el-row>
  488 +<!-- 查询工具-->
  489 + <el-row style="background-color: #FFF;height: 180px;margin-top: 60px">
  490 + <el-col :span="24">
  491 + <el-tabs :tab-position="tabPositions" style="width: 80%;height: 280px;margin: 20px">
  492 + <el-tab-pane label="机场代码查询">
  493 + <span style="font-size: 25px">机场代码查询</span>
  494 + <span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>
  495 + <el-input v-model="input" placeholder="请输入内容"></el-input>
  496 + </el-tab-pane>
  497 + <el-tab-pane label="商品编码查询">
  498 + <span style="font-size: 25px">商品编码查询</span>
  499 + <span style="font-size: 15px">（提供海关HScode编码、对应税率、申报要素查询服务，根据海关最新政策实时更新。）</span>
  500 + <el-input v-model="input" placeholder="请输入内容"></el-input>
  501 + </el-tab-pane>
  502 + <el-tab-pane label="全球港口查询">
  503 + <span style="font-size: 25px">全球港口查询</span>
  504 + <span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>
  505 + <el-input v-model="input" placeholder="请输入内容"></el-input>
  506 + </el-tab-pane>
  507 + <el-tab-pane label="空运货物查询">
  508 + <span style="font-size: 25px">空运货物查询</span>
  509 + <span style="font-size: 15px">（提供世界各国航空公司货物追踪、货物查询服务，实时追踪最新货况。）</span>
  510 + <el-input v-model="input" placeholder="请输入内容"></el-input>
  511 + </el-tab-pane>
  512 + <el-tab-pane label="快件跟踪查询">
  513 + <span style="font-size: 25px">快件跟踪查询</span>
  514 + <span style="font-size: 15px"></span>
  515 + <el-input v-model="input" placeholder="请输入内容"></el-input>
  516 + </el-tab-pane>
  517 + </el-tabs>
  518 + </el-col>
  519 + </el-row>
  520 + </el-main>
  521 + </el-container>
  522 + </div>
  523 +</template>
525 524
526 -<!-- data() {-->  
527 -<!-- return {-->  
528 -<!-- // 空运查询-->  
529 -<!-- form: {-->  
530 -<!-- airLine:undefined,-->  
531 -<!-- originStation:undefined,-->  
532 -<!-- deliveryAddress:undefined,-->  
533 -<!-- weight:undefined,-->  
534 -<!-- },-->  
535 -<!-- // 优价航线表格-->  
536 -<!-- tableData:[-->  
537 -<!-- {-->  
538 -<!-- airLine:'CGO-LUX',-->  
539 -<!-- transportLimitation:'2021-01-17-01-00',-->  
540 -<!-- deliveryAddress:'LUX',-->  
541 -<!-- flightCycle:'2',-->  
542 -<!-- transportPrice:'180',-->  
543 -<!-- }-->  
544 -<!-- ],--> 525 +<script>
  526 + export default {
545 527
546 -<!-- // 热门航线表格-->  
547 -<!-- tableData1:[-->  
548 -<!-- {-->  
549 -<!-- airLine:'CGO-LUX',-->  
550 -<!-- transportLimitation:'2021-01-17-01-00',-->  
551 -<!-- deliveryAddress:'LUX',-->  
552 -<!-- flightCycle:'2',-->  
553 -<!-- transportPrice:'180',-->  
554 -<!-- }-->  
555 -<!-- ],-->  
556 -<!-- tableData2:[-->  
557 -<!-- {-->  
558 -<!-- airLine:'LUX-CGO',-->  
559 -<!-- transportLimitation:'2021-01-18-12-00 ',-->  
560 -<!-- deliveryAddress:'CGO ',-->  
561 -<!-- flightCycle:'2',-->  
562 -<!-- transportPrice:'180',-->  
563 -<!-- }-->  
564 -<!-- ],-->  
565 -<!-- tableData3:[-->  
566 -<!-- {-->  
567 -<!-- airLine:'CGO-LUX',-->  
568 -<!-- transportLimitation:'2021-01-17-01-00',-->  
569 -<!-- deliveryAddress:'LUX',-->  
570 -<!-- flightCycle:'2',-->  
571 -<!-- transportPrice:'180',-->  
572 -<!-- }-->  
573 -<!-- ],-->  
574 -<!-- tableData4:[],-->  
575 -<!-- tableData5:[],-->  
576 -<!-- tableData6:[],-->  
577 -<!-- // 热门港口表格-->  
578 -<!-- tableData7:[],-->  
579 -<!-- tableData8:[],-->  
580 -<!-- tableData9:[],-->  
581 -<!-- tableData10:[],-->  
582 -<!-- tableData11:[],--> 528 + data() {
  529 + return {
  530 + // 空运查询
  531 + form: {
  532 + airLine:undefined,
  533 + originStation:undefined,
  534 + deliveryAddress:undefined,
  535 + weight:undefined,
  536 + },
  537 + // 优价航线表格
  538 + tableData:[
  539 + {
  540 + airLine:'CGO-LUX',
  541 + transportLimitation:'2021-01-17-01-00',
  542 + deliveryAddress:'LUX',
  543 + flightCycle:'2',
  544 + transportPrice:'180',
  545 + }
  546 + ],
583 547
584 -<!-- tabPosition: 'left',-->  
585 -<!-- tabPositions: 'bottom',-->  
586 -<!-- }-->  
587 -<!-- },-->  
588 -<!-- methods: {-->  
589 -<!-- headClass () {-->  
590 -<!-- return 'text-align: center;background:#F5F5F5;'-->  
591 -<!-- },-->  
592 -<!-- rowClass () {-->  
593 -<!-- return 'text-align: center;background:#F5F5F5;'-->  
594 -<!-- },-->  
595 -<!-- open() {-->  
596 -<!-- this.$alert('确认订舱？', '', {-->  
597 -<!-- confirmButtonText: '确定',-->  
598 -<!-- callback: action => {-->  
599 -<!-- this.$message({-->  
600 -<!-- type: 'info',-->  
601 -<!-- message: `action: ${ action }`-->  
602 -<!-- });-->  
603 -<!-- }-->  
604 -<!-- });-->  
605 -<!-- }-->  
606 -<!-- },-->  
607 -<!-- }-->  
608 -<!--</script>--> 548 + // 热门航线表格
  549 + tableData1:[
  550 + {
  551 + airLine:'CGO-LUX',
  552 + transportLimitation:'2021-01-17-01-00',
  553 + deliveryAddress:'LUX',
  554 + flightCycle:'2',
  555 + transportPrice:'180',
  556 + }
  557 + ],
  558 + tableData2:[
  559 + {
  560 + airLine:'LUX-CGO',
  561 + transportLimitation:'2021-01-18-12-00 ',
  562 + deliveryAddress:'CGO ',
  563 + flightCycle:'2',
  564 + transportPrice:'180',
  565 + }
  566 + ],
  567 + tableData3:[
  568 + {
  569 + airLine:'CGO-LUX',
  570 + transportLimitation:'2021-01-17-01-00',
  571 + deliveryAddress:'LUX',
  572 + flightCycle:'2',
  573 + transportPrice:'180',
  574 + }
  575 + ],
  576 + tableData4:[],
  577 + tableData5:[],
  578 + tableData6:[],
  579 + // 热门港口表格
  580 + tableData7:[],
  581 + tableData8:[],
  582 + tableData9:[],
  583 + tableData10:[],
  584 + tableData11:[],
609 585
610 -<!--<style scoped>-->  
611 -<!-- .bg{-->  
612 -<!-- background-color: #F2F2F2;-->  
613 -<!-- width: 100%;-->  
614 -<!-- height: 850px;-->  
615 -<!-- overflow: auto;--> 586 + tabPosition: 'left',
  587 + tabPositions: 'bottom',
  588 + }
  589 + },
  590 + methods: {
  591 + headClass () {
  592 + return 'text-align: center;background:#F5F5F5;'
  593 + },
  594 + rowClass () {
  595 + return 'text-align: center;background:#F5F5F5;'
  596 + },
  597 + open() {
  598 + this.$alert('确认订舱？', '', {
  599 + confirmButtonText: '确定',
  600 + callback: action => {
  601 + this.$message({
  602 + type: 'info',
  603 + message: `action: ${ action }`
  604 + });
  605 + }
  606 + });
  607 + }
  608 + },
  609 + }
  610 +</script>
616 611
617 -<!-- }-->  
618 -<!-- .header{-->  
619 -<!-- font-size: 20px;-->  
620 -<!-- line-height: 120px;-->  
621 -<!-- color:#FFF;-->  
622 -<!-- }-->  
623 -<!-- .el-header{-->  
624 -<!-- background-color: #29A1F7;-->  
625 -<!-- }-->  
626 -<!-- .el-tabs{-->  
627 -<!-- width: 250px;-->  
628 -<!-- }-->  
629 -<!-- .el-menu{-->  
630 -<!-- background-color: #29A1F7;-->  
631 -<!-- font-size: 20px;-->  
632 -<!-- border-bottom-color: #29A1F7;-->  
633 -<!-- }-->  
634 -<!--</style>--> 612 +<style scoped>
  613 + .bg{
  614 + background-color: #F2F2F2;
  615 + width: 100%;
  616 + height: 850px;
  617 + overflow: auto;
  618 +
  619 + }
  620 + .header{
  621 + font-size: 20px;
  622 + line-height: 120px;
  623 + color:#FFF;
  624 + }
  625 + .el-header{
  626 + background-color: #29A1F7;
  627 + }
  628 + .el-tabs{
  629 + width: 250px;
  630 + }
  631 + .el-menu{
  632 + background-color: #29A1F7;
  633 + font-size: 20px;
  634 + border-bottom-color: #29A1F7;
  635 + }
  636 +</style>
1 <template> 1 <template>
2 <!--<div class="app-container">--> 2 <!--<div class="app-container">-->
3 <div class="app-content"> 3 <div class="app-content">
4 - <div class="filter-container">  
5 - <el-input v-model="listQuery.awba" clearable style="width: 200px;" class="filter-item" placeholder="运单号"/>  
6 - <el-input v-model="listQuery.carrier" clearable style="width: 200px;" class="filter-item" placeholder="承运人"/>  
7 - <el-input v-model="listQuery.flightno" clearable style="width: 200px;" class="filter-item" placeholder="航班号"/> 4 + <div class="filter-container" style="margin-top: 50px;padding-bottom: 5px">
  5 + <el-input v-model="listQuery.awba" clearable style="width: 200px;margin-right: 10px" class="filter-item" placeholder="运单号"/>
  6 + <el-input v-model="listQuery.carrier" clearable style="width: 200px;margin-right: 10px" class="filter-item" placeholder="承运人"/>
  7 + <el-input v-model="listQuery.flightno" clearable style="width: 200px;margin-right: 10px" class="filter-item" placeholder="航班号"/>
8 <el-date-picker v-model="listQuery.flightDate" type="date" placeholder="航班日期" 8 <el-date-picker v-model="listQuery.flightDate" type="date" placeholder="航班日期"
9 value-format="yyyy-MM-dd" class="filter-item"></el-date-picker> 9 value-format="yyyy-MM-dd" class="filter-item"></el-date-picker>
10 </div> 10 </div>
11 - <div class="filter-container">  
12 - <el-select v-model="listQuery.messageType" clearable class="filter-item" placeholder="请选择报文类型" style="width: 200px;"> 11 + <div class="filter-container" style="padding-bottom: 5px">
  12 + <el-select v-model="listQuery.messageType" clearable class="filter-item" placeholder="请选择报文类型" style="width: 200px;margin-right: 10px">
13 <el-option v-for="item in messageTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option> 13 <el-option v-for="item in messageTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
14 </el-select> 14 </el-select>
15 - <el-select v-model="listQuery.messageStatus" clearable class="filter-item" placeholder="请选择报文状态" style="width: 200px;"> 15 + <el-select v-model="listQuery.messageStatus" clearable class="filter-item" placeholder="请选择报文状态" style="width: 200px;margin-right: 10px">
16 <el-option v-for="item in messageStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option> 16 <el-option v-for="item in messageStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
17 </el-select> 17 </el-select>
18 - <el-select v-model="listQuery.customStatus" clearable class="filter-item" placeholder="请选择海关状态" style="width: 200px;"> 18 + <el-select v-model="listQuery.customStatus" clearable class="filter-item" placeholder="请选择海关状态" style="width: 200px;margin-right: 10px">
19 <el-option v-for="item in customStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option> 19 <el-option v-for="item in customStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
20 </el-select> 20 </el-select>
21 - <el-button class="filter-item" type="primary" @click="handleSearch">查询</el-button>  
22 - <el-button class="filter-item" style="margin-left: 10px;" type="warning" 21 + <el-button type="warning" style="width:150px" size="medium" icon="el-icon-search" @click="handleSearch">查询</el-button>
  22 + <el-button type="primary" style="width:150px" size="medium" icon="el-icon-search"
23 @click="handleUpdateStatus">批量修改状态</el-button> 23 @click="handleUpdateStatus">批量修改状态</el-button>
24 </div> 24 </div>
25 <div class="midSpan"> 25 <div class="midSpan">
@@ -63,7 +63,7 @@ @@ -63,7 +63,7 @@
63 </div> 63 </div>
64 64
65 <el-table :data="preData" stripe 65 <el-table :data="preData" stripe
66 - style="border-radius: 10px 10px 0px 0px;line-height: 25px;" stripe 66 + style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
67 :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small" 67 :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
68 @selection-change="handleSelectionChange" v-loading="listLoading" 68 @selection-change="handleSelectionChange" v-loading="listLoading"
69 default-expand-all 69 default-expand-all