Skip to content

L
lanzhou-transportation
提交 97d111f6 作者: tangwang
操作

3-25

上级
正在显示 包含 6066 行增加 和 0 行删除
.env 0 → 100644
VUE_APP_PROJECT_NAME = "兰州交通展示平台"
\ No newline at end of file
.env.development 0 → 100644
#开发环境配置
NODE_ENV = "development"
#默认接口地址
VUE_APP_API_BASE_URL = http://192.168.1.111:8082
#新需要的接口地址
VUE_APP_API_Test = http://192.168.1.222:8081
\ No newline at end of file
.env.production 0 → 100644
#生产环境配置
NODE_ENV = "production"
#默认接口地址
VUE_APP_API_BASE_URL = http://192.168.1.111:8082
#新需要的接口地址
VUE_APP_API_Test = http://192.168.1.222:8081
\ No newline at end of file
.eslintrc.js 0 → 100644
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential"],
rules: {
"no-console": 0, // console 不限制
"no-debugger": 0, // 可以使用debugger
"no-mixed-spaces-and-tabs": [0], //关闭禁止混用tab和空格
"quotes": [0], // 引号类型
"semi": [2, "always"],//语句强制分号结尾
// 不需要
"space-before-function-paren": 0, // 函数定义时括号前面要不要有空格
"eol-last": 0, // 文件以单一的换行符结束
"no-extra-semi": 0, // 可以多余的冒号
"eqeqeq": 0, // 必须使用全等
"one-var": 0, // 连续声明
"no-undef": 0, // 可以 有未定义的变量
// 警告
"no-extra-boolean-cast": 1, // 不必要的bool转换
"no-extra-parens": 1, // 非必要的括号
"no-empty": 2, // 块语句中的内容不能为空
"no-use-before-define": [1, "nofunc"], // 未定义前不能使用
"no-unused-vars": 0, // 不能有声明后未被使用的变量或参数
// vue
"flow-vars/define-flow-type": 0,
"flow-vars/use-flow-type": 0,
// 错误
"comma-dangle": [0, "never"], // 对象字面量项尾不能有逗号
"no-constant-condition": 2, // 禁止在条件中使用常量表达式 if(true) if(1)
"no-dupe-args": 2, // 函数参数不能重复
"no-dupe-keys": 2, // 在创建对象字面量时不允许键重复 {a:1,a:1}
"no-duplicate-case": 2, // switch中的case标签不能重复
"no-empty-character-class": 2, // 正则表达式中的[]内容不能为空
"no-invalid-regexp": 2, // 禁止无效的正则表达式
"no-func-assign": 2, // 禁止重复的函数声明
"valid-typeof": 2, // 必须使用合法的typeof的值
"no-unreachable": 2, // 不能有无法执行的代码
"no-unexpected-multiline": 2, // 避免多行表达式
"no-sparse-arrays": 2, // 禁止稀疏数组， [1,,2]
"no-shadow-restricted-names": 2, // 严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-cond-assign": 2, // 禁止在条件表达式中使用赋值语句
"no-native-reassign": 2, // 不能重写native对象
// 代码风格
"no-else-return": 0, // 如果if语句里面有return,后面不能跟else语句
"no-multi-spaces": 1, // 不能用多余的空格
"key-spacing": [0, { // 对象字面量中冒号的前后空格
"beforeColon": false,
"afterColon": true
}],
"block-scoped-var": 2, // 块语句中使用var
"consistent-return": 0, // return 后面是否允许省略
"accessor-pairs": 2, // 在对象中使用getter/setter
"dot-location": [2, "property"], // 对象访问符的位置，换行的时候在行首还是行尾
"no-lone-blocks": 2, // 禁止不必要的嵌套块
"no-labels": 2, // 禁止标签声明
"no-extend-native": 2, // 禁止扩展native对象
"no-floating-decimal": 2, // 禁止省略浮点数中的0 .5 3.
"no-loop-func": 2, // 禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）
"no-new-func": 2, // 禁止使用new Function
"no-self-compare": 2, // 不能比较自身
"no-sequences": 2, // 禁止使用逗号运算符
"no-throw-literal": 2, // 禁止抛出字面量错误 throw "error";
"no-return-assign": [2, "always"], // return 语句中不能有赋值表达式
"no-redeclare": [2, { // 禁止重复声明变量
"builtinGlobals": true
}],
"no-unused-expressions": [2, { // 禁止无用的表达式
"allowShortCircuit": true,
"allowTernary": true
}],
"no-useless-call": 2, // 禁止不必要的call和apply
"no-useless-concat": 2,
"no-void": 2, // 禁用void操作符
"no-with": 2, // 禁用with
"space-infix-ops": 2, // 中缀操作符周围要不要有空格
"valid-jsdoc": [0, { // jsdoc规则
"requireParamDescription": true,
"requireReturnDescription": true
}],
"curly": 0, // 必须使用 if(){} 中的{}
"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-const-assign": 2,//禁止修改const声明的变量
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-empty-label": 0,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-fallthrough": 1,//禁止switch穿透
"no-implicit-coercion": 0,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明（变量或函数）
"no-invalid-this": 2,//禁止无效的this，只能用在构造器，类，对象字面量
"no-irregular-whitespace": 0,//不能有不规则的空格
"no-iterator": 2,//禁止使用__iterator__ 属性
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-mixed-requires": [0, false],//声明时不能混用声明类型
"linebreak-style": [0, "windows"],//换行风格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例，new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象，比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 0,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++，--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块，使用就会报错
"no-script-url": 0,//禁止使用javascript:void(0)
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 0,//一行结束后面不要有空格
"no-this-before-super": 0,//在调用super()之前不能使用this或super
"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
"no-undefined": 2,//不能使用undefined
"no-underscore-dangle": 0,//标识符不能以_开头或结尾
"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-var": 0,//禁用var，用let和const代替
"array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
"arrow-parens": 0,//箭头函数用小括号括起来
"arrow-spacing": 0,//=>的前/后括号
"brace-style": [1, "1tbs"],//大括号风格
"callback-return": 0,//避免多次调用回调什么的
"camelcase": 0,//强制驼峰法命名
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2, "last"],//逗号风格，换行时在行首还是行尾
"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
"consistent-this": [2, "that"],//this别名
"constructor-super": 0,//非派生类不能调用super，派生类必须调用super
"default-case": 2,//switch语句最后必须有default
"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
"func-names": 0,//函数表达式必须有名字
"func-style": [0, "declaration"],//函数风格，规定只能使用函数声明/函数表达式
"generator-star-spacing": 0,//生成器函数*的前后空格
"guard-for-in": 0,//for in循环要用if语句过滤
"handle-callback-err": 0,//nodejs 处理错误
"id-length": 0,//变量名长度
"indent": [0, 2],//缩进风格
"init-declarations": 0,//声明时必须赋初值
"lines-around-comment": 0,//行前/行后备注
"max-depth": [0, 4],//嵌套块深度
"max-nested-callbacks": [0, 2],//回调嵌套深度
"max-params": [0, 3],//函数最多只能有3个参数
"max-statements": [0, 10],//函数内最多有几个声明
"new-cap": 0,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
"new-parens": 2,//new时必须加小括号
"newline-after-var": 0,//变量声明后是否需要空一行
"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字面量缩写语法
"operator-assignment": [0, "always"],//赋值运算符 += -=什么的
"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
"padded-blocks": 0,//块语句内行首行尾是否要空行
"prefer-const": 0,//首选const
"prefer-spread": 0,//首选展开运算
"prefer-reflect": 0,//首选Reflect的方法
"quote-props":[0],//对象字面量中的属性名是否强制双引号
"radix": 0,//parseInt必须指定第二个参数
"id-match": 0,//命名检测
"require-yield": 0,//生成器函数必须有yield
"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0, "always"],//关键字后面是否要空一格
"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
"space-in-parens": [0, "never"],//小括号里面要不要有空格
"space-return-throw-case": 0,//return throw case后面要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
"spaced-comment": 0,//注释风格要不要有空格什么的
"strict": 2,//使用严格模式
"use-isnan": 2,//禁止比较时使用NaN，只能用isNaN()
"vars-on-top": 2,//var必须放在作用域顶部
"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
"wrap-regex": 0,//正则表达式字面量用小括号包起来
"yoda": [2, "never"]//禁止尤达条件
},
parserOptions: {
parser: "babel-eslint"
}
};
.gitignore 0 → 100644
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
LICENSE 0 → 100644
木兰宽松许可证, 第1版
木兰宽松许可证， 第1版
2019年8月 http://license.coscl.org.cn/MulanPSL
您对“软件”的复制、使用、修改及分发受木兰宽松许可证，第1版（“本许可证”）的如下条款的约束：
0. 定义
“软件”是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。
“贡献者”是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。
“法人实体”是指提交贡献的机构及其“关联实体”。
“关联实体”是指，对“本许可证”下的一方而言，控制、受控制或与其共同受控制的机构，此处的控制是指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。
“贡献”是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。
1. 授予版权许可
每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可，您可以复制、使用、修改、分发其“贡献”，不论修改与否。
2. 授予专利许可
每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的（根据本条规定撤销除外）专利许可，供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软件”结合而将必然会侵犯的专利权利要求，不包括仅因您或他人修改“贡献”或其他结合而将必然会侵犯到的专利权利要求。如您或您的“关联实体”直接或间接地（包括通过代理、专利被许可人或受让人），就“软件”或其中的“贡献”对任何人发起专利侵权诉讼（包括反诉或交叉诉讼）或其他专利维权行动，指控其侵犯专利权，则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权行动之日终止。
3. 无商标许可
“本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可，但您为满足第4条规定的声明义务而必须使用除外。
4. 分发限制
您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发，不论修改与否，但您必须向接收者提供“本许可证”的副本，并保留“软件”中的版权、商标、专利及免责声明。
5. 免责声明与责任限制
“软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下，“贡献者”或版权所有者不对任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任，不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。
条款结束。
如何将木兰宽松许可证，第1版，应用到您的软件
如果您希望将木兰宽松许可证，第1版，应用到您的新软件，为了方便接收者查阅，建议您完成如下三步：
1， 请您补充如下声明中的空白，包括软件名、软件的首次发表年份以及您作为版权人的名字；
2， 请您在软件包的一级目录下创建以“LICENSE”为名的文件，将整个许可证文本放入该文件中；
3， 请将如下声明文本放入每个源文件的头部注释中。
Copyright (c) [2019] [name of copyright holder]
[Software Name] is licensed under the Mulan PSL v1.
You can use this software according to the terms and conditions of the Mulan PSL v1.
You may obtain a copy of Mulan PSL v1 at:
http://license.coscl.org.cn/MulanPSL
THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
PURPOSE.
See the Mulan PSL v1 for more details.
Mulan Permissive Software License，Version 1
Mulan Permissive Software License，Version 1 (Mulan PSL v1)
August 2019 http://license.coscl.org.cn/MulanPSL
Your reproduction, use, modification and distribution of the Software shall be subject to Mulan PSL v1 (this License) with following terms and conditions:
0. Definition
Software means the program and related documents which are comprised of those Contribution and licensed under this License.
Contributor means the Individual or Legal Entity who licenses its copyrightable work under this License.
Legal Entity means the entity making a Contribution and all its Affiliates.
Affiliates means entities that control, or are controlled by, or are under common control with a party to this License, ‘control’ means direct or indirect ownership of at least fifty percent (50%) of the voting power, capital or other securities of controlled or commonly controlled entity.
Contribution means the copyrightable work licensed by a particular Contributor under this License.
1. Grant of Copyright License
Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable copyright license to reproduce, use, modify, or distribute its Contribution, with modification or not.
2. Grant of Patent License
Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable (except for revocation under this Section) patent license to make, have made, use, offer for sale, sell, import or otherwise transfer its Contribution where such patent license is only limited to the patent claims owned or controlled by such Contributor now or in future which will be necessarily infringed by its Contribution alone, or by combination of the Contribution with the Software to which the Contribution was contributed, excluding of any patent claims solely be infringed by your or others’ modification or other combinations. If you or your Affiliates directly or indirectly (including through an agent, patent licensee or assignee）, institute patent litigation (including a cross claim or counterclaim in a litigation) or other patent enforcement activities against any individual or entity by alleging that the Software or any Contribution in it infringes patents, then any patent license granted to you under this License for the Software shall terminate as of the date such litigation or activity is filed or taken.
3. No Trademark License
No trademark license is granted to use the trade names, trademarks, service marks, or product names of Contributor, except as required to fulfill notice requirements in section 4.
4. Distribution Restriction
You may distribute the Software in any medium with or without modification, whether in source or executable forms, provided that you provide recipients with a copy of this License and retain copyright, patent, trademark and disclaimer statements in the Software.
5. Disclaimer of Warranty and Limitation of Liability
The Software and Contribution in it are provided without warranties of any kind, either express or implied. In no event shall any Contributor or copyright holder be liable to you for any damages, including, but not limited to any direct, or indirect, special or consequential damages arising from your use or inability to use the Software or the Contribution in it, no matter how it’s caused or based on which legal theory, even if advised of the possibility of such damages.
End of the Terms and Conditions
How to apply the Mulan Permissive Software License，Version 1 (Mulan PSL v1) to your software
To apply the Mulan PSL v1 to your work, for easy identification by recipients, you are suggested to complete following three steps:
i. Fill in the blanks in following statement, including insert your software name, the year of the first publication of your software, and your name identified as the copyright owner;
ii. Create a file named “LICENSE” which contains the whole context of this License in the first directory of your software package;
iii. Attach the statement to the appropriate annotated syntax at the beginning of each source file.
Copyright (c) [2019] [name of copyright holder]
[Software Name] is licensed under the Mulan PSL v1.
You can use this software according to the terms and conditions of the Mulan PSL v1.
You may obtain a copy of Mulan PSL v1 at:
http://license.coscl.org.cn/MulanPSL
THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
PURPOSE.
See the Mulan PSL v1 for more details.
README.md 0 → 100644
# 说明
```
// 启动
npm run serve
// 打包构建
npm run build
```
配置内容
vue + vue-router + vuex + axios + elementUI + echarts + 高德地图(异步加载)
## public文件夹(主要用于存放静态文件以及引入的插件)
browse.html 浏览器升级页面，针对IE低版本浏览器进行提示升级
favicon.ico 页面标题小图标
index.html 主html文件入口
## src文件夹
###api文件夹：主要用于本项目所有接口内容的编写与管理，可根据模块分割成不同的Js文件
###assets文件夹：主要用于存放项目的一些常用文件
common.scss全局自定义样式表,样式全局生效
localElementUI.scss饿了么UI自定义样式表，可以直接覆写elmentUi样式，直接引入覆盖使用即可
reset.css重置样式表
tools.scss 工具样式类，如：浮动，清除浮动，轮廓，字体大小，颜色，盒子模型，宽高，内外边距等。
font：字体图标库
images: 图片存放文件
###components：存放全局组件（建议：按照功能模块命名文件夹存放）注意：需要在当前文件夹的components.js中进行全局注册
###config文件夹：配置文件夹
axios配置文件
include插件引入配置文件
其中echarts通过 this.$echarts方式即可拿到echarts的类
###router文件夹：路由管理文件夹
router.js 路由配置文件
router.interceptor.js 路由拦截配置文件
###store文件夹：vuex状态管理文件夹
-store.js 状态管理配置文件，可按照需求进行多模块配置
###utils文件夹：各种功能文件配置文件夹
directives.js 全局自定义指令配置文件
filter.js 全局过滤器配置文件
format.js 全局数据格式转换配置文件：用于将后台返回非文字内容转换成对应前端需要文字内容（统一集中起来方便管理使用），通过 this.$format.方法名调用
methods.js 全局方法配置文件(可通过this.$method.方法名的方式调用)
utils.js 工具方法配置文件（与methods.js区别在于本文件内容按需引用）
validator.js 全局正则配置文件，通过 this.$validator.方法名调用
###views文件夹：主应用文件夹
project-entrance 项目主功能模块入口，每个模块根据自己的内容划分为多个子模块，建议：命名按照模块名称+功能名称的形式来
###App.vue: （vue主入口文件
###main.js: （vue主配置文件，其中 this.$bus为中央事件总线，可以做各种跨区域调用的事件数据传递
###.env: （通用环境配置文件：在此处配置的内容将同时在开发和生产环境生效
###.env.development: （开发配置文件
###.env.production: （生产配置文件
###.eslintrc.js: （eslint配置文件
###.gitignore （git忽略的文件配置内容
###babel.config.js: （babel配置文件
###postcss.config.js: （postcss配置文件
###package.json: （包管理与引入配置，参考网上
###vue.config.js: （vue核心项目配置文件，参考vue-cli3官网
\ No newline at end of file
babel.config.js 0 → 100644
// babel配置文件、使用babel扩大兼容性
module.exports = {
presets: [["@vue/app", { useBuiltIns: "entry" }]],
plugins: []
};
package.json 0 → 100644
{
"name": "framework-vuecli3.1.0",
"version": "0.1.0",
"author": "WangTang",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@babel/polyfill": "^7.4.4",
"axios": "^0.18.1",
"element-ui": "^2.9.1",
"echarts": "^4.4.0",
"vue": "^2.6.10",
"vue-router": "^3.0.6",
"vuex": "^3.1.1"
},
"devDependencies": {
"@gfx/zopfli": "^1.0.13",
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"autoprefixer": "^9.6.0",
"babel-eslint": "^10.0.1",
"brotli-webpack-plugin": "^1.1.0",
"compression-webpack-plugin": "^3.0.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"terser-webpack-plugin": "^4.1.0",
"vue-template-compiler": "^2.6.10"
},
"browserslist": [
"> 1%",
"last 1 version",
"not ie < 10",
"maintained node versions",
"not dead"
]
}
postcss.config.js 0 → 100644
// postcss配置文件
module.exports = {
plugins: [
// css浏览器前缀插件
require('autoprefixer')
]
};
public/browse.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浏览器升级</title>
<meta content="浏览器升级" name="keywords">
<meta content="浏览器升级" name="description">
<style>
body{
background-color: rgba(199,237,233,.5);
}
.container{
padding-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
您所使用的浏览器版本过低，为了有一个较好的浏览体验，请<a style="color: #12a2e8;" href="https://browsehappy.com/">点击这里</a>升级浏览器！
</div>
</body>
</html>
public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--默认使用极速模式， 作用于360浏览器、QQ浏览器等国产双核浏览器 -->
<meta name="renderer" content="webkit"/>
<!-- 默认使用极速模式，作用于其他双核浏览器 -->
<meta name="force-rendering" content="webkit"/>
<!-- 如果有安装 Google Chrome Frame 插件则默认使用Chromium内核（也就是极速模式内核），否则强制本机支持的最高版本IE内核，作用于IE浏览器： -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- 手机移动端配置 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 标题 -->
<title><%= VUE_APP_PROJECT_NAME %></title>
<!-- 项目小图标 -->
<link rel="icon" href="./favicon.ico">
<script>
// 验证是否为IE浏览器并且获得其版本信息
/**
* @return {number}
*/
function IEVersion () {
var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; // 判断是否IE<11浏览器
if (isIE) {
var reIE = new RegExp('MSIE (\\d+\\.\\d+);');
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp['$1']);
if (fIEVersion === 7) {
return 7;
} else if (fIEVersion === 8) {
return 8;
} else if (fIEVersion === 9) {
return 9;
} else if (fIEVersion === 10) {
return 10;
} else {
return 6; // IE版本<=7
}
}
return 100;
}
// 如果是IE10以下的浏览器将直接跳转到浏览器升级页面,否则进入主页
(function (windows) {
try {
if (IEVersion() < 10) {
window.location.href='./browse.html';
}
} catch (f) {
console.log(f);
}
}(window));
</script>
</head>
<body>
<noscript>
<strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
src/App.vue 0 → 100644
<template>
<div id="app">
<router-view />
</div>
</template>
<style lang="scss">
#app {
width: 100%;
height: 100%;
}
</style>
src/api/api.js 0 → 100644
/*
建议:
1、函数命名尽可能以模块名+函数名的形式来命名,以避免名称冲突。
2、在各个模块开头的部分做一个模块说明。如:平台管理模块
3、每个函数做好一个简单的注释,建议和api文档名字一样,以方便查找
*/
/* 编写格式如下：
export function testApiService(data) { // 接口名（参数）
return service({
url: '/user/login', // 接口地址(会与axios.js文件中配置的baseURL拼接)
method: 'post', // 接口请求方式(默认为get)
data:data, // 接口参数 使用data:data 数据将放在请求体中(参数请求方式根据接口需求确定)
params:data, // 接口参数 使用params: data 数据将放在url的链接上(参数请求方式根据接口需求确定)
mode: VUE_APP_API_Test //（默认可以不写）
// mode可以配置不同的请求服务器地址
// baseURL配置默认请求地址。如：http://192.168.1.111:8082
// mode中配置修改默认请求地址。配置好本地变量(.env.development)将替换默认请求地址。
})
}
使用如下：
import { testApiService } from "src/api/api"
testApiService().then(res=>{})
*/
import Vue from "vue";
import service from "src/config/axios";
/* =====================挂载====================== */
// 将axios实例对象挂载在Vue上，通过this.$axios.get/post/...等调用axios本身的方法
// 如果需要使用那种需要改变请求头的接口，可以使用这个进行请求
Vue.prototype.$axios = service;
/* =====================测试模块====================== */
export function testApiService(data) {
return service({
url: "/testApiService",
method: "post",
params: data,
});
}
src/assets/css/common.scss 0 → 100644
/*
* style css
* 全局样式文件：用于编写自定义的全局公用模块样式
*/
/* 引入重置样式 */
@import "./reset.css";
/* 引入elementUI自定义的样式 */
@import "./localElementUI";
/* 工具样式 */
@import "./tools.scss";
/* 引入字体图标样式 */
@import "../font/iconfont.css";
/* ================项目公共样式区域==================== */
//加上该类则滚动条样式将改变
.m-scroll::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
}
.m-scroll::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
background: rgba(255, 255, 255, 0.3);
}
.m-scroll::-webkit-scrollbar-track {
/*滚动条里面轨道*/
border-radius: 10px;
background: rgba(0, 0, 0, 0.3);
}
\ No newline at end of file
src/assets/css/localElementUI.scss 0 → 100644
/*
ElementUI 本地自定义样式文件，
在本文件中定义个性化的ElementUI的样式内容，此内容将会在全局生效
自定义类名以.m-开头
*/
/* === el-pagination分页统一样式=== */
.m-el-pagination{
display: flex;
justify-content: center;
padding: 16px;
.el-pagination{
.el-pagination__jump{
margin-left: 0
}
}
}
/* === el-dialog弹出框统一样式=== */
.m-el-dialog{
text-align: center;
.el-dialog__header{}
.el-dialog__body{}
.el-dialog__footer{
}
}
/* === el-table表格统一样式=== */
.m-el-table{
}
\ No newline at end of file
src/assets/css/reset.css 0 → 100644
/*
* css reset 重置文件
*/
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent
}
:after,
:before {
box-sizing: border-box
}
html,
body {
font-size: 14px;
color: #333333;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
}
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
a {
text-decoration: none;
}
a:focus,
a:hover {
text-decoration: underline;
}
button[disabled] {
cursor: not-allowed !important;
}
input {
outline: none !important;
}
:focus {
outline: none;
}
/* 取消chrome默认背景色等 */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
\ No newline at end of file
src/assets/css/tools.scss 0 → 100644
/*
* 工具样式
* 浮动、清除浮动、宽高、字体大小、颜色、背景颜色、内容轮廓
*/
/* ==========内容轮廓========== */
// PC内容外部轮廓
.container-outer {
max-width: 1920px;
min-width: 1280px;
width: 100%;
margin: auto;
padding: 0;
overflow: hidden;
}
// PC内容内部轮廓
.container-inner {
width: 1280px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
/* ======== 左右浮动与清除浮动 ======== */
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
clear: both;
overflow: hidden;
content: "";
display: block;
height: 0;
}
/* ==============宽度、高度=============== */
.width100 {
width: 100% !important;
}
.width90 {
width: 90% !important;
}
.width80 {
width: 80% !important;
}
.width70 {
width: 70% !important;
}
.width60 {
width: 60% !important;
}
.width50 {
width: 50% !important;
}
.width40 {
width: 40% !important;
}
.width30 {
width: 30% !important;
}
.width20 {
width: 20% !important;
}
.width10 {
width: 10% !important;
}
.wid560 {
width: 560px !important;
}
.wid480 {
width: 480px !important;
}
.wid360 {
width: 360px !important;
}
.wid240 {
width: 240px !important;
}
.wid180 {
width: 180px !important;
}
.wid150 {
width: 150px !important;
}
.wid120 {
width: 120px !important;
}
.wid90 {
width: 90px !important;
}
.wid60 {
width: 60px !important;
}
.wid30 {
width: 30px !important;
}
.height100 {
height: 100% !important;
}
.height90 {
height: 90% !important;
}
.height80 {
height: 80% !important;
}
.height70 {
height: 70% !important;
}
.height60 {
height: 60% !important;
}
.height50 {
height: 50% !important;
}
.height40 {
height: 40% !important;
}
.height30 {
height: 30% !important;
}
.height20 {
height: 20% !important;
}
.height10 {
height: 10% !important;
}
.hei560 {
height: 480px !important;
}
.hei480 {
height: 480px !important;
}
.hei360 {
height: 360px !important;
}
.hei240 {
height: 240px !important;
}
.hei180 {
height: 180px !important;
}
.hei150 {
height: 150px !important;
}
.hei120 {
height: 120px !important;
}
.hei90 {
height: 90px !important;
}
.hei60 {
height: 60px !important;
}
.hei30 {
height: 30px !important;
}
/* ==============内外边距=============== */
.ml8 {
margin-left: 8px !important;
}
.ml16 {
margin-left: 16px !important;
}
.mr8 {
margin-right: 8px !important;
}
.mr16 {
margin-right: 16px !important;
}
.mt8 {
margin-top: 8px !important;
}
.mt16 {
margin-top: 16px !important;
}
.mb8 {
margin-bottom: 8px !important;
}
.mb16 {
margin-bottom: 16px !important;
}
/* ==============盒子模型================ */
.flex {
display: flex;
}
.inline {
display: inline;
}
.block {
display: block;
}
.inl-blo {
display: inline-block;
}
.ovh {
overflow: hidden;
}
/* ==============颜色类================ */
.color1 {
color: #125412;
}
.bgc1 {
background-color: #125412;
}
/* ==============字体类================ */
.font10 {
font-size: 10px !important;
}
.font12 {
font-size: 12px !important;
}
.font16 {
font-size: 16px !important;
}
.font18 {
font-size: 18px !important;
}
.font20 {
font-size: 20px !important;
}
.font24 {
font-size: 24px !important;
}
\ No newline at end of file
src/assets/font/iconfont.css 0 → 100644
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1567669164324'); /* IE9 */
src: url('iconfont.eot?t=1567669164324#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1567669164324') format('woff'),
url('iconfont.ttf?t=1567669164324') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1567669164324#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shoujianxiang1:before {
content: "\e639";
}
.icon-unie122:before {
content: "\e6cc";
}
.icon-add:before {
content: "\e60e";
}
.icon-wangpanxinjianwenjianjia-copy:before {
content: "\e60a";
}
.icon-shanchu3:before {
content: "\e64c";
}
.icon-qiandai:before {
content: "\e626";
}
.icon-quanbu2:before {
content: "\e62b";
}
.icon-icons01:before {
content: "\e698";
}
.icon-icondoc:before {
content: "\e788";
}
.icon-tongzhi:before {
content: "\e647";
}
.icon-wo:before {
content: "\e671";
}
.icon-dianhua01:before {
content: "\e601";
}
.icon-renzheng:before {
content: "\e6ac";
}
.icon-shouquanweituoshu:before {
content: "\e659";
}
.icon-shijian1:before {
content: "\e60b";
}
.icon-xiangxiajiantou:before {
content: "\e64a";
}
.icon-wenjian1:before {
content: "\e631";
}
.icon-bianji:before {
content: "\e616";
}
.icon-shijian:before {
content: "\e67d";
}
.icon-weixin:before {
content: "\e636";
}
.icon-pdf2:before {
content: "\e603";
}
.icon-PDF:before {
content: "\e64d";
}
.icon-DOC:before {
content: "\e64f";
}
.icon-goumaiweixin:before {
content: "\e607";
}
.icon-bianjiqianming:before {
content: "\e602";
}
.icon-enlarge:before {
content: "\e610";
}
.icon-tiaozheng:before {
content: "\e63a";
}
.icon-qianyuerengou:before {
content: "\e67e";
}
.icon-yidongxuanze:before {
content: "\e67f";
}
.icon-shangchuanmoban:before {
content: "\e9d1";
}
.icon-shanchulianxiren:before {
content: "\e61e";
}
.icon-biaoqian:before {
content: "\e63e";
}
.icon-tianjiafenlei:before {
content: "\e799";
}
.icon-wo1:before {
content: "\e655";
}
.icon-qianyue:before {
content: "\e627";
}
.icon-arrow-left:before {
content: "\e611";
}
.icon-shangchuan1:before {
content: "\e78a";
}
.icon-yichu:before {
content: "\e798";
}
.icon-youbian:before {
content: "\e62c";
}
.icon-liebiao:before {
content: "\e605";
}
.icon-qiye:before {
content: "\e666";
}
.icon-riqi:before {
content: "\e63b";
}
.icon-qi:before {
content: "\e705";
}
.icon-gantanhao:before {
content: "\e762";
}
.icon-docx-:before {
content: "\e63c";
}
.icon-tuichu:before {
content: "\e61f";
}
.icon-xuanzhong:before {
content: "\e662";
}
.icon-shangchuan:before {
content: "\e697";
}
.icon-hezuohuobanxianxing:before {
content: "\e608";
}
.icon-arrowleft:before {
content: "\e600";
}
.icon-zixun:before {
content: "\e664";
}
.icon-lianxiren:before {
content: "\e73e";
}
.icon-renlianshibie:before {
content: "\e620";
}
.icon-dankuangdibuanniu_tianjialianxiren:before {
content: "\e758";
}
.icon-zhuanweiqianyuekehu:before {
content: "\e62a";
}
.icon-tixing:before {
content: "\e6f1";
}
.icon-mima:before {
content: "\e609";
}
.icon-paixu:before {
content: "\e60f";
}
.icon-My:before {
content: "\e615";
}
.icon-sousuo:before {
content: "\e606";
}
.icon-fajianxiang:before {
content: "\e633";
}
.icon-moban:before {
content: "\e613";
}
.icon-delete-s:before {
content: "\e637";
}
.icon-shanchu:before {
content: "\e64e";
}
.icon-songda:before {
content: "\e60c";
}
.icon-LOGO_huaban:before {
content: "\e641";
}
.icon-DOCX:before {
content: "\e667";
}
.icon-dianhua:before {
content: "\e642";
}
.icon-PDF1:before {
content: "\e65f";
}
.icon-xiazai:before {
content: "\e619";
}
.icon-duihao1:before {
content: "\e643";
}
.icon-shenhe:before {
content: "\e604";
}
.icon-tubiao-:before {
content: "\e65b";
}
.icon-dizhi:before {
content: "\e634";
}
.icon-qianming:before {
content: "\e6ca";
}
.icon-gengduo:before {
content: "\e6bf";
}
.icon-yidong:before {
content: "\e623";
}
.icon-jingshi:before {
content: "\e656";
}
.icon-shimingrenzheng:before {
content: "\ea49";
}
.icon-pen:before {
content: "\e707";
}
.icon-shoujianxiang:before {
content: "\e622";
}
.icon-shanchu2:before {
content: "\e64b";
}
.icon-DOC1:before {
content: "\e60d";
}
.icon-qianbao:before {
content: "\e6b9";
}
.icon-duihao:before {
content: "\e674";
}
.icon-caogaoxiang:before {
content: "\e612";
}
.icon-geren:before {
content: "\e657";
}
.icon-wenjian:before {
content: "\e6d2";
}
.icon-youxiang:before {
content: "\e614";
}
.icon-bianjifenlei:before {
content: "\e617";
}
src/assets/font/iconfont.svg 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/components.js 0 → 100644
/*
全局组件注册文件，只需要在这里导入一个组件并且注册就可以在全局所有地方使用。
如：<mfooter></mfooter>
*/
import TianQi from "./../views/tianqi.vue";
export default (Vue) => {
Vue.component('TianQi',TianQi);
};
src/components/layout/404.vue 0 → 100644
<template>
<div class="no-page">
<div class="pic-box">
<img class="pic" src="../../assets/images/404.png" />
<span class="num">{{ currentTime }}</span>
</div>
</div>
</template>
<script>
export default {
name: "no-page",
data() {
return {
currentTime: 5,
timer: null
};
},
created() {
this.timer = setInterval(() => {
this.currentTime--;
if (this.currentTime <= 0) {
clearInterval(this.timer);
this.$router.go(-1);
}
}, 1000);
},
destroyed() {
clearInterval(this.timer);
}
};
</script>
<style scoped lang="scss">
.no-page {
.pic-box {
position: absolute;
left: 50%;
top: 50%;
margin-left: -255px;
margin-top: -211px;
width: 510px;
height: 422px;
img {
width: 510px;
height: 422px;
}
.num {
font-size: 18px;
position: absolute;
left: 338px;
top: 175px;
color: red;
}
}
}
</style>
src/config/axios.js 0 → 100644
/*
* axios拦截器与初始化配置
*/
import axios from "axios";
import ElementUI from "element-ui";
// 创建单独的axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_API_BASE_URL // api的base_url
});
// axios添加一个请求拦截器
service.interceptors.request.use(
// 这里需要根据项目目录结构来配置
(config) => {
// 如果设置了路径mode则替换基础请求路径baseURL
if (config.mode) {
config.baseURL = process.env[config.mode];
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// axios添加一个响应拦截器
service.interceptors.response.use(
(response) => {
// 这里需要根据接口返回结构配置
if (response.data) {
return response.data;
} else {
return Promise.reject(response.data);
}
},
(error) => {
// 提示
ElementUI.Message({
message: '接口超时,请检查网络设置',
dangerouslyUseHTMLString: true,
type: "error"
});
return Promise.reject(error);
}
);
export default service;
\ No newline at end of file
src/config/include.js 0 → 100644
/*
* 通用引入文件，一般用于引入一些新的插件或者其他的vue插件内容
建议：所有新引入的插件在此处填写名称
当前引入插件有：
elementUl
vuex
vue-router
babel/polyfill
*/
import Vue from "vue";
// import 项目公用样式
import "src/assets/css/common.scss";
// import 全局过滤器
import "src/utils/filter.js";
// import 全局自定义指令
import "src/utils/directives.js";
// import 全局正规规则
import "src/utils/validator.js";
// import 全局方法并且注册全局方法
import methods from 'src/utils/methods';
Vue.use(methods);
// import 全局组件并且进行注册
import components from 'src/components/components';
Vue.use(components);
// import element-ui并且注册
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
// 导入echarts对象并且将其注册在Vue组件上
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
// 挂载高德地图-异步加载方式
import MapLoader from "src/utils/AMap.js";
Vue.prototype.$map = MapLoader;
src/main.js 0 → 100644
import Vue from "vue";
import App from "./App.vue";
// 兼容ES6的语法（适配一些不支持ES6语法的浏览器）
import "@babel/polyfill";
// 引入路由
import router from "src/router/router.js";
// 引入路由守卫
import "src/router/router-interceptor.js";
// 引入vuex
import store from "src/store/store.js";
// 引入include插件文件
import "src/config/include.js";
// 中央事件总线,一般用于组件间进行事件通知
/*
通过函数形势传递内容,如this.$bus.$on监听，this.$bus.emit触发，
*/
Vue.prototype.$bus = new Vue();
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
src/router/router-interceptor.js 0 → 100644
/*
* 路由拦截配置文件
* */
import router from 'src/router/router';
// import ElementUI from "element-ui";
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 该路径需要登录
next();
// if (sessionStorage.getItem('Authorization')) { // 是否已经登录
// next();
// } else {
// ElementUI.Message({
// message: '请先登录',
// dangerouslyUseHTMLString: true,
// type: "error"
// });
// next('/account/login');
// }
} else {
next();
}
});
\ No newline at end of file
src/router/router.js 0 → 100644
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
/* 路由不需要异步加载区域 */
import Home from "../views/Home.vue";
import NotFound from "src/components/layout/404.vue";
/* 路由异步加载区域 */
// 路由配置项
const routerConfig = {
routes: [
// 404
{
path: "*",
name: "404",
component: NotFound,
meta: {
requireAuth: false,
title: "404",
},
},
// 路由进入重定向
{
path: "/",
redirect: "/home",
},
// 主路由模块
{
path: "/home",
name: "home",
component: Home,
meta: {
requireAuth: true,
},
children: [],
},
],
};
// 测试模块（生产模式下将不会引入）
// 在开发模式下才会引入的组件内容（测试组件一般放置在views/test文件夹中）
// 用于测试某些插件或自定义组件是否可以使用或者符合需求
if (process.env.NODE_ENV === "development") {
routerConfig.routes = routerConfig.routes.concat([
{
// test
path: "/test",
name: "test",
component: () => import("src/components/layout/404.vue"),
},
]);
}
export default new Router(routerConfig);
src/store/store.js 0 → 100644
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
/*
* vuex管理文件
*/
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
getters: {},
modules:{}
});
src/utils/AMap.js 0 → 100644
// 高德地图懒加载
export default function MapLoader() {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap);
} else {
let script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "http://webapi.amap.com/maps?v=1.4.15&callback=onAMapLoaded&key=f71aa620a3d4a93b69de8e090954085b&plugin=AMap.ControlBar";
script.onerror = reject;
document.head.appendChild(script);
}
window.onAMapLoaded = () => {
resolve(window.AMap);
};
});
}
// 高德地图ui懒加载
// 高德地图相关视图插件懒加载
\ No newline at end of file
src/utils/directives.js 0 → 100644
/*
* 这里是一个全局自定义指令的文件，在编写区域编写指令方法，然后注册区域注册即可全局使用
*/
import Vue from "vue";
/* =====================编写区域=========================== */
const vFocus = {
bind: (el, binding, vnode) => {
console.log("自定义指令1");
},
inserted: (el, binding, vnode) => {},
update: (el, binding, vnode,oldVnode) => {},
componentUpdated: (el, binding, vnode,oldVnode) => {},
unbind: (el, binding, vnode) => {},
};
/* ========================注册区域=========================== */
// 注册一个全局自定义指令 `v-focus`
Vue.directive("focus", vFocus);
src/utils/filter.js 0 → 100644
/*
* 这里是一个全局过滤器的文件,方法编写完毕后，在注册区域注册即可全局使用
*/
import Vue from "vue";
import { formatDate } from "./util.js";
/* =====================方法编写区域=========================== */
/*
时间戳处理
@example value | dateFormat("YYYY-MM-dd") => YYYY-MM-dd
*/
function dateFormat(timestamp, fmTimestamp) {
return formatDate(timestamp, fmTimestamp);
}
/*
金钱三位一逗号，小数点保留两位
@example value | moneyFormat => 132,156,132.00
*/
function moneyFormat(val) {
val = val.toString().replace(/\$|\,/g,'');
if(isNaN(val)) {
val = "0";
}
let sign = val == (val = Math.abs(val));
val = Math.floor(val * 100 + 0.50000000001);
let cents = val % 100;
val = Math.floor(val / 100).toString();
if(cents < 10) {
cents = "0" + cents;
}
for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
val = val.substring(0,val.length - (4 * i + 3)) + ',' + val.substring(val.length - (4 * i + 3));
}
let res = (sign ? '' : '-') + val + '.' + cents;
return res;
}
/*
电话号码隐藏过滤
@example value | telFormat => 188****7983
*/
function telFormat(val){
if(val){
return val.replace(/^(.{3})(?:\d+)(.{4})$/,"$1****$2");
}
}
/*
身份证号码隐藏过滤
@example value | telFormat => 188****7983
*/
function idcardFormat(val){
if(val){
return val.replace(/^(.{6})(?:\d+)(.{4})$/,"$1*******$2");
}
}
/*
去除空格
@example value | noSpace => 'xxx'
*/
function noSpace(value) {
var str = trim(value);
return str;
}
/* ========================注册区域=========================== */
//时间戳处理
Vue.filter("dateFormat", dateFormat);
//去除空格
Vue.filter('noSpace',noSpace);
src/utils/format.js 0 → 100644
import Vue from "vue";
/*
* 格式转换文件：用于将后台序号转换成对应枚举内容（统一集中起来方便管理使用）
* 建议：命名按照 format + 对应的内容的形式命名
* 通过this.$format.sex 就可以调用到对应的转换对象
*/
const format = {
sex:{
1: '男',
2: '女'
},
isChange:{
1: '是',
2: '否'
}
};
Vue.prototype.$format = format;
\ No newline at end of file
src/utils/methods.js 0 → 100644
/*
* 全局方法定义文件通过原型方式直接绑定到vue上可以通过this来调用（统一集中起来方便管理使用）
* 与 util.js区别，这里编写的方法不管调不调用都会打包进代码中，而util.js中的方法只有在导入使用的时候才会打包
* 使用方式：this.$test();
*/
/* ============================函数编写区域================================ */
// 测试方法
function test() {
console.log('全局方法测试');
}
/* =============================方法注册区域========================= */
export default {
// eslint-disable-next-line no-unused-vars
install(Vue, options) {
Vue.prototype.$test = test;
}
};
\ No newline at end of file
src/utils/util.js 0 → 100644
/*
全局工具方法
每个编写的工具方法必须要写好说明，最好有例子
通过import {} from 'util.js'有选择导入
当前拥有的方法有：
1.根据时间及格式获取时间的字符串（formatDate）
2.转化时间（transDate）=> x天前
*/
/* 1.根据时间及格式获取时间的字符串
* @param {int} iDate 时间
* @param {string} sFormat 格式，默认：yyyy-MM-dd HH:mm:ss
* @return {string} 格式化后的日期字符串
* @example formatDate(new Date(),'yyyy-MM-dd HH:mm:ss SSS');// 2017-6-6 11:11:11
*/
export const formatDate = (iDate, sFormat = "yyyy-MM-dd HH:mm:ss") => {
if (!iDate) {
return;
}
let dDate = new Date(iDate);
let year = dDate.getFullYear(); // 年
let month = dDate.getMonth() + 1; // 月
if (month < 10) {
month = "0" + month;
}
let date = dDate.getDate(); // 日
if (date < 10) {
date = "0" + date;
}
let hour = dDate.getHours(); // 时
if (hour < 10) {
hour = "0" + hour;
}
let minute = dDate.getMinutes(); // 分
if (minute < 10) {
minute = "0" + minute;
}
let second = dDate.getSeconds(); // 秒
if (second < 10) {
second = "0" + second;
}
let millisecond = dDate.getMilliseconds(); // 毫秒
if (sFormat.indexOf("yyyy") >= 0) {
sFormat = sFormat.replace("yyyy", year + "");
}
if (sFormat.indexOf("MM") >= 0) {
sFormat = sFormat.replace("MM", month + "");
}
if (sFormat.indexOf("dd") >= 0) {
sFormat = sFormat.replace("dd", date + "");
}
if (sFormat.indexOf("HH") >= 0) {
sFormat = sFormat.replace("HH", hour + "");
}
if (sFormat.indexOf("mm") >= 0) {
sFormat = sFormat.replace("mm", minute + "");
}
if (sFormat.indexOf("ss") >= 0) {
sFormat = sFormat.replace("ss", second + "");
}
if (sFormat.indexOf("SSS") >= 0) {
sFormat = sFormat.replace("SSS", millisecond + "");
}
return sFormat;
};
/* 2.转化时间
* @param {String} str (yyyy-MM-dd HH:mm:ss SSS)
* @return {String} 转化后的时间
* @example transDate("2019-1-10");// 2天前
*/
export const transDate = str => {
if (!str) return "";
let date = new Date(str);
// 现在的时间-传入的时间 = 相差的时间（单位 = 毫秒）
let time = new Date().getTime() - date.getTime();
if (time < 0) {
return "";
} else if (time / 1000 < 30) {
return "刚刚";
} else if (time / 1000 < 60) {
return parseInt(time / 1000) + "秒前";
} else if (time / 60000 < 60) {
return parseInt(time / 60000) + "分钟前";
} else if (time / 3600000 < 24) {
return parseInt(time / 3600000) + "小时前";
} else if (time / 86400000 < 31) {
return parseInt(time / 86400000) + "天前";
} else if (time / 2592000000 < 12) {
return parseInt(time / 2592000000) + "月前";
} else {
return parseInt(time / 31536000000) + "年前";
}
};
\ No newline at end of file
src/utils/validator.js 0 → 100644
/*
正则表达式与各种校验方法定义文件
正则建议：命名按照 reg + 对应的内容的形式命名
通过this.$validate.regMobile 就可以调用到对应的转换对象
*/
import Vue from "vue";
// 正则表达式定义
const validate = {
// 手机号
regMobile: /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/,
// 邮箱
regEmail: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
};
Vue.prototype.$validate = validate;
\ No newline at end of file
src/views/Home.vue 0 → 100644
<template>
<div class="home-box">
<div class="home-content">
<iframe
class="bg-box"
src="http://www.thingjs.com/s/3074b56ba74709e5a0996038?params=105b0f77fd24654d4eebc434e9"
></iframe>
<BottomComponent
@botNum="botNumT"
class="home-content-bot"
></BottomComponent>
<transition-group name="el-fade-in-linear">
<!-- 头部 -->
<TopComponent1
key="TopComponent1"
v-if="activeType == 0"
class="home-content-top"
></TopComponent1>
<TopComponent2
key="TopComponent2"
v-if="activeType == 1"
class="home-content-top2"
></TopComponent2>
<TopComponent3
key="TopComponent3"
v-if="activeType == 2"
class="home-content-top2"
></TopComponent3>
<TopComponent4
key="TopComponent4"
v-if="activeType == 4"
class="home-content-top2"
></TopComponent4>
<TopComponent5
key="TopComponent5"
v-if="activeType == 3"
class="home-content-top2"
></TopComponent5>
<!-- 左边 -->
<LeftComponent1
key="LeftComponent1"
v-if="activeType == 0"
class="home-content-left1"
></LeftComponent1>
<LeftComponent2
key="LeftComponent2"
v-if="activeType == 1"
class="home-content-left1"
></LeftComponent2>
<LeftComponent3
key="LeftComponent3"
v-if="activeType == 2"
class="home-content-left1"
></LeftComponent3>
<LeftComponent4
key="LeftComponent4"
v-if="activeType == 4"
class="home-content-left1"
></LeftComponent4>
<LeftComponent5
key="LeftComponent5"
v-if="activeType == 3"
class="home-content-left1"
></LeftComponent5>
<!-- 右边 -->
<RightComponent1
key="RightComponent1"
v-if="activeType == 0"
class="home-content-right1"
></RightComponent1>
<RightComponent2
key="RightComponent2"
v-if="activeType == 1"
class="home-content-right1"
></RightComponent2>
<RightComponent3
key="RightComponent3"
v-if="activeType == 2"
class="home-content-right1"
></RightComponent3>
<RightComponent4
key="RightComponent4"
v-if="activeType == 4"
class="home-content-right1"
></RightComponent4>
<RightComponent5
key="RightComponent5"
v-if="activeType == 3"
class="home-content-right1"
></RightComponent5>
</transition-group>
</div>
</div>
</template>
<script>
import BottomComponent from "./bottom-component";
import TopComponent1 from "./top/top-component1";
import TopComponent2 from "./top/top-component2";
import TopComponent3 from "./top/top-component3";
import TopComponent4 from "./top/top-component4";
import TopComponent5 from "./top/top-component5";
import LeftComponent1 from "./left1/left-component1";
import LeftComponent2 from "./left2/left-component2";
import LeftComponent3 from "./left3/left-component3";
import LeftComponent4 from "./left4/left-component4";
import LeftComponent5 from "./left5/left-component5";
import RightComponent1 from "./right1/right-component1";
import RightComponent2 from "./right2/right-component2";
import RightComponent3 from "./right3/right-component3";
import RightComponent4 from "./right4/right-component4";
import RightComponent5 from "./right5/right-component5";
export default {
components: {
BottomComponent,
TopComponent1,
TopComponent2,
TopComponent3,
TopComponent4,
TopComponent5,
LeftComponent1,
LeftComponent2,
LeftComponent3,
LeftComponent4,
LeftComponent5,
RightComponent1,
RightComponent2,
RightComponent3,
RightComponent4,
RightComponent5,
},
name: "home",
data() {
return {
activeType: 0,
};
},
methods: {
botNumT(type) {
this.activeType = type;
},
},
};
</script>
<style scoped lang="scss">
.home-box {
width: 100%;
height: 100%;
position: relative;
.bg-box {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.home-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
.home-content-top {
position: absolute;
max-width: 1600px;
min-width: 1360px;
width: 50%;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.home-content-top2 {
position: absolute;
max-width: 800px;
min-width: 660px;
width: 50%;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.home-content-bot {
position: absolute;
max-width: 1400px;
min-width: 1160px;
width: 50%;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
}
.home-content-left1 {
position: absolute;
left: 0;
top: 0;
}
.home-content-right1 {
position: absolute;
right: 0;
top: 0;
}
}
}
</style>
src/views/bottom-component.vue 0 → 100644
<template>
<div class="bottom-components">
<div class="bottom-item" @click="changeType(0)">
<div class="bottom-bg8" :class="activeNum == 0 ? 'active-bg8' : ''"></div>
<p :class="activeNum == 0 ? 'p1' : ''">总览</p>
</div>
<div class="bottom-item" @click="changeType(1)">
<div class="bottom-bg1" :class="activeNum == 1 ? 'active-bg1' : ''"></div>
<p :class="activeNum == 1 ? 'p1' : ''">出租车</p>
</div>
<div class="bottom-item" @click="changeType(2)">
<div class="bottom-bg2" :class="activeNum == 2 ? 'active-bg2' : ''"></div>
<p :class="activeNum == 2 ? 'p1' : ''">公交车</p>
</div>
<div class="bottom-item" @click="changeType(3)">
<div class="bottom-bg3" :class="activeNum == 3 ? 'active-bg3' : ''"></div>
<p :class="activeNum == 3 ? 'p1' : ''">BRT巴士</p>
</div>
<div class="bottom-item" @click="changeType(4)">
<div class="bottom-bg5" :class="activeNum == 4 ? 'active-bg5' : ''"></div>
<p :class="activeNum == 4 ? 'p1' : ''">自行车</p>
</div>
<!-- <div class="bottom-item" @click="changeType(5)">
<div class="bottom-bg5" :class="activeNum == 5 ? 'active-bg5' : ''"></div>
<p :class="activeNum == 5 ? 'p1' : ''">应急管理</p>
</div>
<div class="bottom-item" @click="changeType(6)">
<div class="bottom-bg6" :class="activeNum == 6 ? 'active-bg6' : ''"></div>
<p :class="activeNum == 6 ? 'p1' : ''">统计决策分析</p>
</div>
<div class="bottom-item" @click="changeType(7)">
<div class="bottom-bg7" :class="activeNum == 7 ? 'active-bg7' : ''"></div>
<p :class="activeNum == 7 ? 'p1' : ''">服务质量考核与发展</p>
</div>
<div class="bottom-item" @click="changeType(8)">
<div class="bottom-bg8" :class="activeNum == 8 ? 'active-bg8' : ''"></div>
<p :class="activeNum == 8 ? 'p1' : ''">交通运行监测</p>
</div> -->
</div>
</template>
<script>
export default {
data() {
return {
activeNum: 0,
};
},
methods: {
changeType(num) {
this.activeNum = num;
this.$emit("botNum", this.activeNum);
},
},
};
</script>
<style lang="scss">
.bottom-components {
display: flex;
justify-content: space-between;
.bottom-item {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
width: 180px;
height: 80px;
cursor: pointer;
.active-bg1 {
background-image: url("./../assets/images/jt_41.png") !important;
}
.active-bg2 {
background-image: url("./../assets/images/jt_38.png") !important;
}
.active-bg3 {
background-image: url("./../assets/images/jt_36.png") !important;
}
.active-bg4 {
background-image: url("./../assets/images/3_56.png") !important;
}
.active-bg5 {
background-image: url("./../assets/images/jt_44.png") !important;
}
.active-bg6 {
background-image: url("./../assets/images/3_50.png") !important;
}
.active-bg7 {
background-image: url("./../assets/images/3_52.png") !important;
}
.active-bg8 {
background-image: url("./../assets/images/3_54.png") !important;
}
.bottom-bg1 {
width: 80px;
height: 80px;
background-image: url("./../assets/images/jt_22.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.bottom-bg2 {
width: 80px;
height: 80px;
background-image: url("./../assets/images/jt_10.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.bottom-bg3 {
width: 80px;
height: 80px;
background-image: url("./../assets/images/jt_12.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.bottom-bg4 {
width: 80px;
height: 80px;
background-image: url("./../assets/images/jt_25.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.bottom-bg5 {
width: 80px;
height: 80px;
background-image: url("./../assets/images/jt_07.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.bottom-bg6 {
width: 80px;
height: 80px;
background-image: url("./../assets/images/jt_15.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.bottom-bg7 {
width: 80px;
height: 80px;
background-image: url("./../assets/images/jt_17.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.bottom-bg8 {
width: 80px;
height: 80px;
background-image: url("./../assets/images/jt_19.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
p {
color: #37dbfe;
font-size: 16px;
width: 100%;
text-align: center;
}
.p1 {
color: rgba(220, 176, 39, 1) !important;
}
}
}
</style>
\ No newline at end of file
src/views/left1/left-component1.vue 0 → 100644
<template>
<div class="left-component1">
<TianQi></TianQi>
<h3 class="list-title">全市交通运行情况</h3>
<div class="total-list">
<div class="list-item">
<div>
<p class="item-p"><i class="item-bg1"></i>公交车</p>
<div class="list-item-box">
<div class="box-num">3</div>
<div class="box-num">0</div>
<div class="box-num">.</div>
<div class="box-num">2</div>
<div class="box-num">0</div>
<div class="box-final">KM/L</div>
</div>
</div>
<div class="echart-box">
<Left1Echart1></Left1Echart1>
</div>
<div class="total-static-box">
<span>总数 <em>348</em></span>
<span>在线 <em>266</em></span>
<span>离线 <em>10</em></span>
</div>
</div>
<div class="list-item">
<div>
<p class="item-p"><i class="item-bg2"></i>出租车</p>
<div class="list-item-box">
<div class="box-num">4</div>
<div class="box-num">1</div>
<div class="box-num">.</div>
<div class="box-num">1</div>
<div class="box-num">6</div>
<div class="box-final">KM/L</div>
</div>
</div>
<div class="echart-box">
<Left1Echart2></Left1Echart2>
</div>
<div class="total-static-box">
<span>总数 <em>348</em></span>
<span>在线 <em>266</em></span>
<span>离线 <em>10</em></span>
</div>
</div>
</div>
<h3 class="list-title" style="margin-top: 32px">交通拥堵情况</h3>
<div class="total-list">
<div class="list-item">
<div>
<p class="item-p">当前交通拥堵指数</p>
<div class="list-item-box">
<div class="box-num">2</div>
<div class="box-num">0</div>
<div class="box-num">.</div>
<div class="box-num">5</div>
<div class="box-num">1</div>
<div class="box-final">KM/L</div>
</div>
</div>
<div class="echart-box">
<Left1Echart3></Left1Echart3>
</div>
<div class="total-static-box">
<span>总数 <em>348</em></span>
<span>在线 <em>266</em></span>
<span>离线 <em>10</em></span>
</div>
</div>
<div class="list-item">
<div>
<p class="item-p">上周交通拥堵指数</p>
<div class="list-item-box">
<div class="box-num">1</div>
<div class="box-num">0</div>
<div class="box-num">.</div>
<div class="box-num">2</div>
<div class="box-num">1</div>
<div class="box-final">KM/L</div>
</div>
</div>
<div class="echart-box">
<Left1Echart4></Left1Echart4>
</div>
<div class="total-static-box">
<span>总数 <em>348</em></span>
<span>在线 <em>266</em></span>
<span>离线 <em>10</em></span>
</div>
</div>
</div>
</div>
</template>
<script>
import Left1Echart1 from "./left1-echarts1";
import Left1Echart2 from "./left1-echarts2";
import Left1Echart3 from "./left1-echarts3";
import Left1Echart4 from "./left1-echarts4";
export default {
components: {
Left1Echart1,
Left1Echart2,
Left1Echart3,
Left1Echart4,
},
data() {
return {};
},
};
</script>
<style lang="scss">
.left-component1 {
width: 600px;
height: 960px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
color: #fff;
padding: 16px;
.list-title {
font-size: 18px;
color: #47f1f0;
}
.total-list {
display: flex;
justify-content: space-between;
align-content: center;
.list-item {
.item-p {
color: #47f1f0;
margin: 16px 0;
.item-bg1 {
width: 16px;
height: 16px;
display: inline-block;
background-image: url("./../../assets/images/兰州_13.png");
background-size: contain;
background-repeat: no-repeat;
margin-right: 8px;
}
.item-bg2 {
width: 16px;
height: 16px;
display: inline-block;
background-image: url("./../../assets/images/兰州_10.png");
background-size: contain;
background-repeat: no-repeat;
margin-right: 8px;
}
}
.list-item-box {
display: flex;
margin: 16px 0;
.box-num {
font-size: 18px;
color: #47f1f0;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
display: inline-block;
background-image: url("./../../assets/images/兰州_24.png");
background-size: contain;
background-repeat: no-repeat;
margin: 0 4px;
}
.box-final {
height: 32px;
line-height: 40px;
overflow: hidden;
}
}
.echart-box {
height: 250px;
width: 250px;
margin: auto;
}
.total-static-box {
display: flex;
justify-content: space-around;
em {
font-size: 18px;
}
span:nth-child(1) {
color: #0fdb0f;
}
span:nth-child(2) {
color: #37dbfe;
}
span:nth-child(3) {
color: #f4bd39;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/left1/left1-echarts1.vue 0 → 100644
<template>
<!-- 公交车 -->
<div class="left1-echarts1" id="left1-echarts1"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
grid: {
top: "0%",
left: "0%",
right: "0%",
bottom: "0%",
containLabel: true,
},
color:['#37dbfe',"#f4bd39","#f39800","#e5004f"],
tooltip: {},
series: [
{
name: "",
type: "pie",
radius: [30, 70],
center: ["50%", "50%"],
// roseType: "area",
label: {
},
itemStyle: {
borderRadius: 8,
},
data: [
{ value: 9120, name: "在线" },
{ value: 1140, name: "离线" },
],
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("left1-echarts1"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.left1-echarts1 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/left1/left1-echarts2.vue 0 → 100644
<template>
<!-- 公交车 -->
<div class="left1-echarts2" id="left1-echarts2"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
grid: {
top: "0%",
left: "0%",
right: "0%",
bottom: "0%",
containLabel: true,
},
color:['#37dbfe',"#f4bd39","#f39800","#e5004f"],
tooltip: {},
series: [
{
name: "",
type: "pie",
radius: [30, 70],
center: ["50%", "50%"],
// roseType: "area",
label: {
},
itemStyle: {
borderRadius: 8,
},
data: [
{ value: 9250, name: "在线" },
{ value: 4560, name: "离线" },
],
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("left1-echarts2"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.left1-echarts2 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/left1/left1-echarts3.vue 0 → 100644
<template>
<!-- 公交车 -->
<div class="left1-echarts3" id="left1-echarts3"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
grid: {
top: "0%",
left: "0%",
right: "0%",
bottom: "0%",
containLabel: true,
},
color:['#37dbfe',"#f4bd39","#f39800","#e5004f"],
tooltip: {},
series: [
{
name: "",
type: "pie",
radius: [30, 70],
center: ["50%", "50%"],
// roseType: "area",
label: {
},
itemStyle: {
borderRadius: 8,
},
data: [
{ value: 9120, name: "在线" },
{ value: 1540, name: "离线" },
],
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("left1-echarts3"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.left1-echarts3 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/left1/left1-echarts4.vue 0 → 100644
<template>
<!-- 公交车 -->
<div class="left1-echarts4" id="left1-echarts4"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
grid: {
top: "0%",
left: "0%",
right: "0%",
bottom: "0%",
containLabel: true,
},
color:['#37dbfe',"#f4bd39","#f39800","#e5004f"],
tooltip: {},
series: [
{
name: "",
type: "pie",
radius: [30, 70],
center: ["50%", "50%"],
// roseType: "area",
label: {
},
itemStyle: {
borderRadius: 8,
},
data: [
{ value: 1190, name: "在线" },
{ value: 1120, name: "离线" },
],
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("left1-echarts4"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.left1-echarts4 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/left2/left-component2.vue 0 → 100644
<template>
<div class="left-component2">
<TianQi></TianQi>
<h3 class="list-title">出租车在线情况</h3>
<div class="box-list">
<div class="box-item" v-for="(item, index) in 6" :key="index">
<img src="./../../assets/images/兰州_21.png" class="img" alt="" />
<div class="compony">兰州交通出租汽车有限公司</div>
<div class="bl">
<p>94.5%</p>
<p>在线占比</p>
</div>
<div class="total">
<img src="./../../assets/images/left2-icon2.png" alt="" />
<div>
<p>873</p>
<p>总车数</p>
</div>
</div>
<div class="total">
<img src="./../../assets/images/left2-icon1.png" alt="" />
<div>
<p>873</p>
<p>离线数</p>
</div>
</div>
</div>
</div>
<div class="left2-box">
<div class="left2-box-l">
<h3 class="list-title" style="margin-top: 32px">运营里程数</h3>
<div class="echart-box">
<Left2Echart></Left2Echart>
</div>
</div>
<div class="left2-box-r">
<h3 class="list-title" style="margin-top: 32px">数据分析</h3>
<div class="tree-box">
<h4 style="width: 100%; margin: 16px 0">早晚高峰平级等待时间</h4>
<div class="tree-list">
<div class="tree-item">
<div class="name">城关区</div>
<img src="./../../assets/images/left2-1.png" alt="" />
<div class="info">
<p>全天&nbsp;<strong>98.30</strong>&nbsp;分钟</p>
<p>早高峰&nbsp;<strong>18.60</strong>&nbsp;分钟</p>
<p>晚高峰&nbsp;<strong>57.97</strong>&nbsp;分钟</p>
</div>
</div>
<div class="tree-item">
<div class="name">七里河区</div>
<img src="./../../assets/images/left2-1.png" alt="" />
<div class="info">
<p>全天&nbsp;<strong>98.30</strong>&nbsp;分钟</p>
<p>早高峰&nbsp;<strong>18.60</strong>&nbsp;分钟</p>
<p>晚高峰&nbsp;<strong>57.97</strong>&nbsp;分钟</p>
</div>
</div>
<div class="tree-item">
<div class="name">安宁区</div>
<img src="./../../assets/images/left2-1.png" alt="" />
<div class="info">
<p>全天&nbsp;<strong>98.30</strong>&nbsp;分钟</p>
<p>早高峰&nbsp;<strong>18.60</strong>&nbsp;分钟</p>
<p>晚高峰&nbsp;<strong>57.97</strong>&nbsp;分钟</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Left2Echart from "./left2-echarts1";
export default {
components: {
Left2Echart,
},
data() {
return {};
},
};
</script>
<style lang="scss">
.left-component2 {
width: 600px;
height: 960px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
color: #fff;
padding: 16px;
.list-title {
font-size: 18px;
color: #47f1f0;
}
.box-list {
.box-item {
display: flex;
align-items: center;
margin: 10px 0;
.img {
width: 50px;
}
.compony {
border: 1px solid #47f1f0;
padding: 2px;
color: #47f1f0;
margin: 0 16px;
}
.bl {
p {
text-align: center;
}
p:nth-child(1) {
color: #47f1f0;
font-size: 18px;
}
}
.total {
display: flex;
align-items: center;
margin-left: 16px;
> img {
width: 30px;
height: 30px;
margin-right: 8px;
}
> div {
p {
text-align: left;
}
p:nth-child(1) {
color: #47f1f0;
font-size: 16px;
}
}
}
}
}
.left2-box {
display: flex;
.left2-box-l {
width: 50%;
.echart-box {
height: 300px;
margin-top: 16px;
}
}
.left2-box-r {
width: 50%;
.tree-box {
.tree-list {
.tree-item {
display: flex;
align-items: center;
.name {
color: #47f1f0;
font-size: 18px;
}
.info {
> p {
line-height: 26px;
}
strong {
color: #47f1f0;
}
}
> img {
margin: 0 8px;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/left2/left2-echarts1.vue 0 → 100644
<template>
<!-- 公交车 -->
<div class="left2-echarts1" id="left2-echarts1"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
grid: {
top: "15%",
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true,
},
legend: {
left: "center",
textStyle: {
color: "#ffffff",
},
},
color: ["#37dbfe", "#f4bd39", "#f39800", "#e5004f"],
tooltip: {},
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
type: "value",
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
name: "总里程数",
},
{
data: [100, 150, 100, 60, 20, 11, 60],
type: "bar",
name: "运营里程数",
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("left2-echarts1"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.left2-echarts1 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/left3/left-component3.vue 0 → 100644
<template>
<div class="left-component3">
<TianQi></TianQi>
<h3 class="list-title">公交站点覆盖情况</h3>
<div class="content-list">
<div class="box-list">
<div class="box-item">
<img src="./../../assets/images/兰州_19.png" class="img" alt="" />
<div class="compony">公交站点500米覆盖</div>
</div>
<div class="box-item">
<img src="./../../assets/images/兰州_19.png" class="img" alt="" />
<div class="compony">公交站点500米覆盖</div>
</div>
<div class="box-item">
<img src="./../../assets/images/兰州_19.png" class="img" alt="" />
<div class="compony">公交站点500米覆盖</div>
</div>
<div class="box-item">
<img src="./../../assets/images/兰州_19.png" class="img" alt="" />
<div class="compony">公交站点500米覆盖</div>
</div>
<div class="box-item">
<img src="./../../assets/images/兰州_19.png" class="img" alt="" />
<div class="compony">公交站点500米覆盖</div>
</div>
<div class="box-item">
<img src="./../../assets/images/兰州_19.png" class="img" alt="" />
<div class="compony">公交站点500米覆盖</div>
</div>
<div class="box-item">
<img src="./../../assets/images/兰州_19.png" class="img" alt="" />
<div class="compony">公交站点500米覆盖</div>
</div>
<div class="box-item">
<img src="./../../assets/images/兰州_19.png" class="img" alt="" />
<div class="compony">公交站点500米覆盖</div>
</div>
<div class="box-item">
<img src="./../../assets/images/兰州_19.png" class="img" alt="" />
<div class="compony">公交站点500米覆盖</div>
</div>
<div class="box-item">
<img src="./../../assets/images/兰州_19.png" class="img" alt="" />
<div class="compony">公交站点500米覆盖</div>
</div>
</div>
<div class="right-list">
<div class="total">
<div>
<p>发布时间：2021-01-07</p>
<p>公交站点500米覆盖率</p>
</div>
<div class="picbox">94.5%</div>
</div>
<div class="echarts-box">
<h3 class="list-title">历史走势图</h3>
<div class="echarts"><Right3Echarts1></Right3Echarts1></div>
</div>
</div>
</div>
</div>
</template>
<script>
import Right3Echarts1 from "./right3-echarts1";
export default {
components: { Right3Echarts1 },
data() {
return {};
},
};
</script>
<style lang="scss">
.left-component3 {
width: 600px;
height: 960px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
color: #fff;
padding: 16px;
.list-title {
font-size: 18px;
color: #47f1f0;
}
.box-list {
.box-item {
display: flex;
align-items: center;
margin: 10px 0;
.img {
width: 50px;
}
.compony {
padding: 2px;
margin: 0 16px;
font-size: 16px;
}
}
}
.content-list {
display: flex;
.right-list {
margin-left: 32px;
.total {
display: flex;
align-items: center;
.picbox {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 22px;
color: #47f1f0;
background: url("./../../assets/images/gjc_54.png") no-repeat;
background-size: 100% 100%;
border-radius: 50%;
margin-left: 16px;
}
}
.echarts-box {
margin-top: 32px;
.echarts {
height: 200px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/left3/right3-echarts1.vue 0 → 100644
<template>
<div class="right3-echarts1" id="right3-echarts1"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
tooltip: {},
color: ["#37dbfe", "#fef737", "#0ce094"],
grid: {
top: "15%",
left: "5%",
right: "10%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["08", "09", "10", "11", "12"],
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#226b84",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
},
series: [
{
data: [82, 92, 62, 94, 29],
type: "line",
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("right3-echarts1"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.right3-echarts1 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/left4/left-component4.vue 0 → 100644
<template>
<div class="left-component4">
<TianQi></TianQi>
<h3 class="list-title">
<span>停车最多站点</span>
<span class="title-change">
<span class="span-active">当日</span>
<span>昨日</span>
</span>
<span class="title-tips">已借/<em>已还</em></span>
</h3>
<div class="content-list">
<div class="list-table">
<div class="table-content">
<div class="table-line">
<span><em>44</em>辆</span>
<span>当日</span>
<span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
</div>
<div class="table-line">
<span><em>44</em>辆</span>
<span>当日</span>
<span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
</div>
<div class="table-line">
<span><em>44</em>辆</span>
<span>当日</span>
<span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
</div>
<div class="table-line">
<span><em>44</em>辆</span>
<span>当日</span>
<span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
</div>
<div class="table-line">
<span><em>44</em>辆</span>
<span>当日</span>
<span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
</div>
<div class="table-line">
<span><em>44</em>辆</span>
<span>当日</span>
<span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
</div>
<div class="table-line">
<span><em>44</em>辆</span>
<span>当日</span>
<span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
</div>
<div class="table-line">
<span><em>44</em>辆</span>
<span>当日</span>
<span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
</div>
<div class="table-line">
<span><em>44</em>辆</span>
<span>当日</span>
<span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
</div>
<div class="table-line">
<span><em>44</em>辆</span>
<span>当日</span>
<span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
</div>
</div>
</div>
</div>
<div>
<h3 class="list-title" style="margin: 32px 0">
<span>用户骑车分析</span>
</h3>
<img src="./../../assets/images/zxc_125.png" style="width: 100%" alt="" />
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="scss">
.left-component4 {
width: 600px;
height: 960px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
color: #fff;
padding: 16px;
.list-title {
font-size: 18px;
color: #47f1f0;
display: flex;
justify-content: space-between;
.title-change {
span {
cursor: pointer;
color: #fff;
}
.span-active {
padding: 2px 16px;
border: 1px solid #47f1f0;
color: #47f1f0;
border-radius: 4px;
margin-right: 8px;
}
}
.title-tips {
em {
color: #f2c232;
}
}
}
.content-list {
margin-top: 32px;
.list-table {
.table-title {
span {
display: inline-block;
width: 25%;
text-align: center;
color: #2fa7eb;
}
}
.table-conetent {
}
.table-line {
background: linear-gradient(
to bottom,
rgba(16, 55, 98, 0.8),
rgba(69, 97, 128, 0.8)
);
padding: 8px 0;
margin: 8px 0;
span {
display: inline-block;
width: 33%;
padding-left: 32px;
em {
color: #47f1f0;
}
}
span:nth-child(1) {
color: #f9c741;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/left5/left-component5.vue 0 → 100644
<template>
<div class="left-component5">
<TianQi></TianQi>
<div class="right-box">
<h3 class="list-title">日里程统计</h3>
<div class="echarts1">
<Left5Echart1></Left5Echart1>
</div>
</div>
<div class="right-box">
<h3 class="list-title">月里程数</h3>
<div class="echarts2">
<Left5Echart2></Left5Echart2>
</div>
</div>
</div>
</template>
<script>
import Left5Echart1 from "./left5-echarts1";
import Left5Echart2 from "./left5-echarts2";
export default {
components: { Left5Echart1, Left5Echart2 },
data() {
return {};
},
};
</script>
<style lang="scss">
.left-component5 {
width: 600px;
height: 960px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
color: #fff;
padding: 16px;
.list-title {
font-size: 18px;
color: #47f1f0;
margin-bottom: 16px;
.short-title {
font-size: 10px;
color: #ffffff;
float: right;
}
}
.echarts1 {
height: 300px;
}
.echarts2 {
height: 300px;
}
}
</style>
\ No newline at end of file
src/views/left5/left5-echarts1.vue 0 → 100644
<template>
<div class="right5-echarts1" id="right5-echarts1"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
tooltip: {},
color: ["#37dbfe", "#fef737", "#0ce094"],
grid: {
top: "10%",
left: "10%",
right: "10%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
data: [
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
],
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#226b84",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
},
series: [
{
data: [82, 92, 62, 94, 29, 62, 94, 29, 29, 62, 94, 29],
type: "bar",
label: {
show: true,
position: "top",
color: "#ffffff",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#01e5eb" },
{ offset: 0.5, color: "#0eb3e1" },
{ offset: 1, color: "#1a86d8" },
]),
},
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("right5-echarts1"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.right5-echarts1 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/left5/left5-echarts2.vue 0 → 100644
<template>
<div class="right5-echarts2" id="right5-echarts2"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
tooltip: {},
color: ["#37dbfe", "#fef737", "#0ce094"],
grid: {
top: "15%",
left: "5%",
right: "10%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["08", "09", "10", "11", "12"],
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#226b84",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
},
series: [
{
data: [82, 92, 62, 94, 29],
type: "line",
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("right5-echarts2"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.right5-echarts2 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/right1/right-component1.vue 0 → 100644
<template>
<div class="right-component1">
<div class="right-box1">
<div>
<h3 class="list-title">全网拥堵指数走势图</h3>
<div class="echart1">
<Right1Echarts1 ref="Right1Echarts1"></Right1Echarts1>
</div>
</div>
<div>
<h3 class="list-title">当前拥堵路段</h3>
<div class="echart1">
<Right1Echarts2 ref="Right1Echarts2"></Right1Echarts2>
</div>
</div>
</div>
<div class="right-box2">
<div class="box2-l">
<h3 class="list-title title-box2" style="width: 100%">
<span>当前拥堵地段</span>
<span class="short-title">
<span>
<i
class="el-icon-top"
style="color: #19ea28; margin: 0 4px 0 8px"
></i>
上升</span
>
<span>
<i
class="el-icon-bottom"
style="color: #ff2f2f; margin: 0 4px 0 8px"
></i>
下降</span
>
<span>
<i class="m-stop"></i>
持平</span
>
</span>
</h3>
<ul class="list-ul">
<li>
<span class="li-num" style="background: #8f131b">1</span>
<div class="li-line">
<p>北京西路</p>
<div>
<el-progress :percentage="50" :show-text="false"></el-progress>
</div>
</div>
<span class="li-type"
>31.58KM/H
<i class="el-icon-top" style="color: #19ea28; margin: 0"></i>
</span>
</li>
<li>
<span class="li-num" style="background: #764922">2</span>
<div class="li-line">
<p>北京西路</p>
<div>
<el-progress :percentage="50" :show-text="false"></el-progress>
</div>
</div>
<span class="li-type"
>31.58KM/H
<i class="el-icon-top" style="color: #19ea28; margin: 0"></i>
</span>
</li>
<li>
<span class="li-num" style="background: #846f2c">3</span>
<div class="li-line">
<p>北京西路</p>
<div>
<el-progress :percentage="50" :show-text="false"></el-progress>
</div>
</div>
<span class="li-type"
>31.58KM/H
<i class="el-icon-top" style="color: #19ea28; margin: 0"></i>
</span>
</li>
<li>
<span class="li-num" style="background: #55662b">4</span>
<div class="li-line">
<p>北京西路</p>
<div>
<el-progress :percentage="50" :show-text="false"></el-progress>
</div>
</div>
<span class="li-type"
>31.58KM/H
<i class="el-icon-top" style="color: #19ea28; margin: 0"></i>
</span>
</li>
<li>
<span class="li-num" style="background: #364555">5</span>
<div class="li-line">
<p>北京西路</p>
<div>
<el-progress :percentage="50" :show-text="false"></el-progress>
</div>
</div>
<span class="li-type"
>31.58KM/H
<i class="el-icon-top" style="color: #19ea28; margin: 0"></i>
</span>
</li>
<li>
<span class="li-num" style="background: #364555">6</span>
<div class="li-line">
<p>北京西路</p>
<div>
<el-progress :percentage="50" :show-text="false"></el-progress>
</div>
</div>
<span class="li-type"
>31.58KM/H
<i class="el-icon-top" style="color: #19ea28; margin: 0"></i>
</span>
</li>
<li>
<span class="li-num" style="background: #364555">7</span>
<div class="li-line">
<p>北京西路</p>
<div>
<el-progress :percentage="50" :show-text="false"></el-progress>
</div>
</div>
<span class="li-type"
>31.58KM/H
<i class="el-icon-top" style="color: #19ea28; margin: 0"></i>
</span>
</li>
<li>
<span class="li-num" style="background: #364555">8</span>
<div class="li-line">
<p>北京西路</p>
<div>
<el-progress :percentage="50" :show-text="false"></el-progress>
</div>
</div>
<span class="li-type"
>31.58KM/H
<i class="el-icon-top" style="color: #19ea28; margin: 0"></i>
</span>
</li>
</ul>
</div>
<div class="box2-r">
<h3 class="list-title" style="margin-left: 50px">公交线网运行图</h3>
<div class="box2-r-echarts">
<Right1Echarts3></Right1Echarts3>
</div>
<h3 class="list-title">交通指标</h3>
<div class="box2-r-jiaotong">
<div class="jt-box">
<div class="jt-item">
<el-progress
type="dashboard"
:width="80"
:percentage="96.11"
:color="colors"
></el-progress>
<div class="jt-short">完成率</div>
</div>
<p class="jt-p">网格区A</p>
</div>
<div class="jt-box">
<div class="jt-item">
<el-progress
:width="80"
type="dashboard"
:percentage="97.56"
:color="colors"
></el-progress>
<div class="jt-short">完成率</div>
</div>
<p class="jt-p">网格区B</p>
</div>
<div class="jt-box">
<div class="jt-item">
<el-progress
:width="80"
type="dashboard"
:percentage="95.96"
:color="colors"
></el-progress>
<div class="jt-short">完成率</div>
</div>
<p class="jt-p">网格区C</p>
</div>
</div>
</div>
</div>
<div class="right-box3">
<h3 class="list-title">平均车速</h3>
<div class="box3-list">
<div class="box3-item">
<img
src="./../../assets/images/兰州_19.png"
style="width: 60px"
alt=""
/>
<div class="box3-item-list">
<p>公交车</p>
<p>30KM/L</p>
</div>
</div>
<div class="box3-item">
<img
src="./../../assets/images/兰州_19.png"
style="width: 60px"
alt=""
/>
<div class="box3-item-list">
<p>公交车</p>
<p>30KM/L</p>
</div>
</div>
<div class="box3-item">
<img
src="./../../assets/images/兰州_19.png"
style="width: 60px"
alt=""
/>
<div class="box3-item-list">
<p>公交车</p>
<p>30KM/L</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Right1Echarts1 from "./right1-echarts1";
import Right1Echarts2 from "./right1-echarts2";
import Right1Echarts3 from "./right1-echarts3";
export default {
components: {
Right1Echarts1,
Right1Echarts2,
Right1Echarts3,
},
data() {
return {
colors: [
{ color: "#1b60df", percentage: 20 },
{ color: "#1876e8", percentage: 40 },
{ color: "#1394f6", percentage: 60 },
{ color: "#11a1fb", percentage: 80 },
{ color: "#10a8ff", percentage: 100 },
],
};
},
};
</script>
<style lang="scss">
.right-component1 {
width: 600px;
height: 960px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
color: #fff;
padding: 16px;
.title-box2 {
display: flex;
align-items: center;
justify-content: space-between;
}
.list-title {
font-size: 18px;
color: #47f1f0;
margin-bottom: 16px;
.short-title {
font-size: 10px;
color: #ffffff;
float: right;
}
}
.right-box1 {
display: flex;
justify-content: space-between;
.echart1 {
height: 200px;
width: 250px;
margin: auto;
}
}
.right-box2 {
display: flex;
justify-content: space-between;
.box2-l {
width: 300px;
.m-stop {
margin: 0 4px 0 8px;
vertical-align: middle;
display: inline-block;
width: 6px;
height: 4px;
background: #e9b018;
}
.list-ul {
> li {
margin: 16px 0;
display: flex;
align-items: center;
.li-num {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
border-radius: 50%;
}
.li-line {
width: 40%;
margin: 0 4px;
> p {
margin: 0 0 8px 0;
}
}
.li-type {
color: #47f1f0;
margin-top: 20px;
}
}
}
}
.box2-r {
width: 300px;
.box2-r-echarts {
width: 300px;
height: 300px;
}
.box2-r-jiaotong {
display: flex;
justify-content: space-between;
.jt-box {
.jt-item {
position: relative;
.el-progress {
.el-progress__text {
color: #47f1f0;
}
}
.jt-short {
position: absolute;
left: 20px;
bottom: 0;
color: #47f1f0;
}
}
.jt-p {
text-align: center;
color: #47f1f0;
}
}
}
}
}
.right-box3 {
.box3-list {
display: flex;
justify-content: space-between;
}
.box3-item {
display: flex;
align-content: center;
align-items: center;
justify-content: space-between;
.box3-item-list {
margin-left: 16px;
> p {
margin: 10px 0;
color: #47f1f0;
}
> p:nth-child(2) {
font-size: 18px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/right1/right1-echarts1.vue 0 → 100644
<template>
<div class="right1-echarts1" id="right1-echarts1"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
tooltip:{},
legend: {
left: "center",
textStyle: {
color: "#ffffff",
},
},
color: ["#37dbfe", "#fef737", "#0ce094"],
grid: {
top: "15%",
left: "5%",
right: "10%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["08", "09", "10", "11", "12"],
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#226b84",
},
},
axisLine: {
// show: false,
lineStyle: {
color: "#226b84",
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
data: [82, 92, 1, 94, 29],
type: "line",
name: "今日",
},
{
data: [82, 32, 11, 4, 12],
type: "line",
name: "昨日",
},
{
data: [12, 52, 31, 24, 32],
type: "line",
name: "上周",
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("right1-echarts1"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.right1-echarts1 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/right1/right1-echarts2.vue 0 → 100644
<template>
<div class="right1-echarts2" id="right1-echarts2"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
tooltip: {},
legend: {
left: "center",
textStyle: {
color: "#ffffff",
},
},
color: ["#37dbfe", "#fef737", "#0ce094"],
grid: {
top: "15%",
left: "5%",
right: "10%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["08", "09", "10", "11", "12"],
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#226b84",
},
},
axisLine: {
// show: false,
lineStyle: {
color: "#226b84",
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
data: [82, 92, 1, 94, 29],
type: "line",
name: "今日",
},
{
data: [82, 32, 11, 4, 12],
type: "line",
name: "昨日",
},
{
data: [12, 52, 31, 24, 32],
type: "line",
name: "上周",
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("right1-echarts2"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.right1-echarts2 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/right1/right1-echarts3.vue 0 → 100644
<template>
<div class="right1-echarts3" id="right1-echarts3"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
tooltip: {},
color: ["#37dbfe", "#fef737", "#0ce094"],
grid: {
top: "15%",
left: "5%",
right: "10%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["08", "09", "10", "11", "12"],
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#226b84",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
},
series: [
{
data: [82, 92, 62, 94, 29],
type: "line",
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("right1-echarts3"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.right1-echarts3 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/right2/right-component2.vue 0 → 100644
<template>
<div class="right-component2">
<div class="right-box">
<h3 class="list-title">出租车空乘比例</h3>
<div class="echart-box">
<RightEchart1></RightEchart1>
</div>
</div>
<div class="right-box">
<h3 class="list-title">出租车平级车速</h3>
<div class="echart-box">
<RightEchart2></RightEchart2>
</div>
</div>
<div class="right-box2">
<h3 class="list-title">监控情况</h3>
<div class="monitor">
<div class="monitor-bg"></div>
<div class="monitor-bg"></div>
</div>
</div>
</div>
</template>
<script>
import RightEchart1 from "./right2-echarts1";
import RightEchart2 from "./right2-echarts2";
export default {
components: {
RightEchart1,
RightEchart2,
},
data() {
return {};
},
};
</script>
<style lang="scss">
.right-component2 {
width: 600px;
height: 960px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
color: #fff;
padding: 16px;
.list-title {
font-size: 18px;
color: #47f1f0;
margin-bottom: 16px;
.short-title {
font-size: 10px;
color: #ffffff;
float: right;
}
}
.right-box {
.echart-box {
height: 300px;
}
}
.right-box2 {
.monitor {
display: flex;
justify-content: space-between;
.monitor-bg {
width: 48%;
height: 200px;
background-image: url("./../../assets/images/未标题-1_55.png");
background-size: 100% 100%;
background-position: center;
}
}
}
}
</style>
\ No newline at end of file
src/views/right2/right2-echarts1.vue 0 → 100644
<template>
<div class="right2-echarts1" id="right2-echarts1"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
tooltip: {},
color: ["#37dbfe", "#fef737", "#0ce094"],
grid: {
top: "10%",
left: "10%",
right: "10%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
data: [
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
],
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#226b84",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
},
series: [
{
data: [82, 92, 62, 94, 29, 62, 94, 29, 29, 62, 94, 29],
type: "bar",
label: {
show: true,
position: "top",
color: "#ffffff",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#01e5eb" },
{ offset: 0.5, color: "#0eb3e1" },
{ offset: 1, color: "#1a86d8" },
]),
},
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("right2-echarts1"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.right2-echarts1 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/right2/right2-echarts2.vue 0 → 100644
<template>
<div class="right2-echarts2" id="right2-echarts2"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
tooltip: {},
color: ["#37dbfe", "#fef737", "#0ce094"],
grid: {
top: "10%",
left: "10%",
right: "10%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
data: [
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
],
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#226b84",
},
},
axisLine: {
lineStyle: {
color: "#ffffff",
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
},
},
axisLabel: {
lineStyle: {
color: "#ffffff",
},
},
},
series: [
{
data: [82, 92, 62, 94, 29, 62, 94, 29, 29, 62, 94, 29],
type: "bar",
label: {
show: true,
position: "top",
color: "#ffffff",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#01e5eb" },
{ offset: 0.5, color: "#0eb3e1" },
{ offset: 1, color: "#1a86d8" },
]),
},
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("right2-echarts2"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.right2-echarts2 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/right3/right-component3.vue 0 → 100644
<template>
<div class="right-component3">
<div class="right-box">
<h3 class="list-title">公交车运行</h3>
<div class="list-content">
<div class="list-item" style="color: #46efee">
<img src="./../../assets/images/gjc_73.png" alt="" />
<div>
<p>2873</p>
<p>总车数</p>
</div>
</div>
<div class="list-item" style="color: #bfbfbf">
<img src="./../../assets/images/gjc_76.png" alt="" />
<div>
<p>673</p>
<p>离线数</p>
</div>
</div>
<div class="list-item" style="color: #02d247">
<img src="./../../assets/images/gjc_84.png" alt="" />
<div>
<p>1873</p>
<p>在线数</p>
</div>
</div>
<div class="list-item" style="color: #ff4747">
<img src="./../../assets/images/gjc_85.png" alt="" />
<div>
<p>673</p>
<p>停运数</p>
</div>
</div>
</div>
</div>
<div class="right-box">
<h3 class="list-title">线路</h3>
<div class="list-table">
<div class="table-title">
<span>公交车</span>
<span>在线车辆</span>
<span>运营车辆</span>
<span>客流数</span>
</div>
<div class="table-content">
<div class="table-line">
<span>[2路]</span>
<span><em>44</em>辆</span>
<span><em>1162</em>公里</span>
<span><em>12144</em>人次</span>
</div>
<div class="table-line">
<span>[2路]</span>
<span><em>44</em>辆</span>
<span><em>1162</em>公里</span>
<span><em>12144</em>人次</span>
</div>
<div class="table-line">
<span>[2路]</span>
<span><em>44</em>辆</span>
<span><em>1162</em>公里</span>
<span><em>12144</em>人次</span>
</div>
<div class="table-line">
<span>[2路]</span>
<span><em>44</em>辆</span>
<span><em>1162</em>公里</span>
<span><em>12144</em>人次</span>
</div>
<div class="table-line">
<span>[2路]</span>
<span><em>44</em>辆</span>
<span><em>1162</em>公里</span>
<span><em>12144</em>人次</span>
</div>
<div class="table-line">
<span>[2路]</span>
<span><em>44</em>辆</span>
<span><em>1162</em>公里</span>
<span><em>12144</em>人次</span>
</div>
<div class="table-line">
<span>[2路]</span>
<span><em>44</em>辆</span>
<span><em>1162</em>公里</span>
<span><em>12144</em>人次</span>
</div>
<div class="table-line">
<span>[2路]</span>
<span><em>44</em>辆</span>
<span><em>1162</em>公里</span>
<span><em>12144</em>人次</span>
</div>
<div class="table-line">
<span>[2路]</span>
<span><em>44</em>辆</span>
<span><em>1162</em>公里</span>
<span><em>12144</em>人次</span>
</div>
</div>
</div>
</div>
<div class="right-box2">
<h3 class="list-title">监控情况</h3>
<div class="monitor">
<div class="monitor-bg"></div>
<div class="monitor-bg"></div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
};
</script>
<style lang="scss">
.right-component3 {
width: 600px;
height: 960px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
color: #fff;
padding: 16px;
.list-title {
font-size: 18px;
color: #47f1f0;
margin-bottom: 16px;
.short-title {
font-size: 10px;
color: #ffffff;
float: right;
}
}
.right-box {
.list-content {
display: flex;
flex-wrap: wrap;
.list-item {
width: 40%;
display: flex;
margin: 3%;
> div {
margin-left: 16px;
p:nth-child(1) {
font-size: 24px;
}
}
}
}
.list-table {
.table-title {
span {
display: inline-block;
width: 25%;
text-align: center;
color: #2fa7eb;
}
}
.table-conetent {
}
.table-line {
background: linear-gradient(
to bottom,
rgba(16, 55, 98, 0.8),
rgba(69, 97, 128, 0.8)
);
padding: 2px 0;
margin: 8px 0;
span {
display: inline-block;
width: 25%;
text-align: center;
em {
color: #47f1f0;
}
}
span:nth-child(1) {
color: #f9c741;
}
}
}
}
.right-box2 {
.monitor {
display: flex;
justify-content: space-between;
.monitor-bg {
width: 48%;
height: 200px;
background-image: url("./../../assets/images/未标题-1_55.png");
background-size: 100% 100%;
background-position: center;
}
}
}
}
</style>
\ No newline at end of file
src/views/right4/right-component4.vue 0 → 100644
<template>
<div class="right-component4">
<div class="right-box">
<h3 class="list-title">公交车运行</h3>
<div class="list-content">
<div class="list-item">
<img src="./../../assets/images/zxc_95.png" alt="" />
<div>
<p>可还车辆</p>
<p><em>1970</em>辆</p>
</div>
</div>
<div class="list-item">
<img src="./../../assets/images/zxc_95.png" alt="" />
<div>
<p>在线</p>
<p><em>970</em>辆</p>
</div>
</div>
<div class="list-item">
<img src="./../../assets/images/zxc_121.png" alt="" />
<div>
<p>总站点数</p>
<p><em>1970</em></p>
</div>
</div>
<div class="list-item">
<img src="./../../assets/images/zxc_95.png" alt="" />
<div>
<p>总车辆数</p>
<p><em>3297</em>辆</p>
</div>
</div>
</div>
</div>
<div class="right-box">
<h3 class="list-title">当前车辆使用情况</h3>
<div class="list-table">
<div class="table-title">
<span>低点</span>
<span>占比</span>
<span>总车数</span>
<span>在线</span>
</div>
<div class="table-content">
<div class="table-line">
<span>[江宁区]</span>
<span><em>10%</em></span>
<span><em>1162</em>辆</span>
<span><em>121</em>辆</span>
</div>
<div class="table-line">
<span>[江宁区]</span>
<span><em>10%</em></span>
<span><em>1162</em>辆</span>
<span><em>121</em>辆</span>
</div>
<div class="table-line">
<span>[江宁区]</span>
<span><em>10%</em></span>
<span><em>1162</em>辆</span>
<span><em>121</em>辆</span>
</div>
<div class="table-line">
<span>[江宁区]</span>
<span><em>10%</em></span>
<span><em>1162</em>辆</span>
<span><em>121</em>辆</span>
</div>
<div class="table-line">
<span>[江宁区]</span>
<span><em>10%</em></span>
<span><em>1162</em>辆</span>
<span><em>121</em>辆</span>
</div>
<div class="table-line">
<span>[江宁区]</span>
<span><em>10%</em></span>
<span><em>1162</em>辆</span>
<span><em>121</em>辆</span>
</div>
<div class="table-line">
<span>[江宁区]</span>
<span><em>10%</em></span>
<span><em>1162</em>辆</span>
<span><em>121</em>辆</span>
</div>
<div class="table-line">
<span>[江宁区]</span>
<span><em>10%</em></span>
<span><em>1162</em>辆</span>
<span><em>121</em>辆</span>
</div>
<div class="table-line">
<span>[江宁区]</span>
<span><em>10%</em></span>
<span><em>1162</em>辆</span>
<span><em>121</em>辆</span>
</div>
</div>
</div>
</div>
<div class="right-box2">
<h3 class="list-title">借还柱状图</h3>
<div class="monitor">
<Right4Echarts1></Right4Echarts1>
</div>
</div>
</div>
</template>
<script>
import Right4Echarts1 from './right4-echarts1';
export default {
components: {
Right4Echarts1
},
data() {
return {};
},
};
</script>
<style lang="scss">
.right-component4 {
width: 600px;
height: 960px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
color: #fff;
padding: 16px;
.list-title {
font-size: 18px;
color: #47f1f0;
margin-bottom: 16px;
.short-title {
font-size: 10px;
color: #ffffff;
float: right;
}
}
.right-box {
.list-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.list-item {
width: 35%;
display: flex;
margin: 3%;
background-image: url("./../../assets/images/zxc_91.png");
background-size: 100% 100%;
background-position: center;
padding: 16px 32px;
align-items: center;
> div {
margin-left: 16px;
em {
color: #47f1f0;
font-size: 18px;
}
}
}
}
.list-table {
.table-title {
span {
display: inline-block;
width: 25%;
text-align: center;
color: #2fa7eb;
}
}
.table-conetent {
}
.table-line {
background: linear-gradient(
to bottom,
rgba(16, 55, 98, 0.8),
rgba(69, 97, 128, 0.8)
);
padding: 2px 0;
margin: 8px 0;
span {
display: inline-block;
width: 25%;
text-align: center;
em {
color: #47f1f0;
}
}
span:nth-child(1) {
color: #f9c741;
}
}
}
}
.right-box2 {
.monitor {
height: 300px;
}
}
}
</style>
\ No newline at end of file
src/views/right4/right4-echarts1.vue 0 → 100644
<template>
<div class="right4-echarts1" id="right4-echarts1"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chart: null,
option: {
legend: {
left: "right",
textStyle: {
color: "#ffffff",
},
},
tooltip: {},
color: ["#37dbfe", "#fef737", "#0ce094"],
grid: {
top: "15%",
left: "10%",
right: "0%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
data: [],
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
type: "value",
splitLine: {
// show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
data: [82, 92, 62, 94, 29, 62, 94, 29, 29, 62, 94, 29],
type: "bar",
name:'借',
label: {
show: true,
position: "top",
color: "#ffffff",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#379cf2" },
{ offset: 0.5, color: "#379cf2" },
{ offset: 1, color: "#379cf2" },
]),
},
},
{
data: [82, 92, 62, 94, 29, 62, 94, 29, 29, 62, 94, 29],
type: "bar",
name:'还',
label: {
show: true,
position: "top",
color: "#ffffff",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#e6b520" },
{ offset: 0.5, color: "#e6b520" },
{ offset: 1, color: "#e6b520" },
]),
},
},
],
},
};
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("right4-echarts1"));
this.chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
};
</script>
<style lang="scss" scoped>
.right4-echarts1 {
width: 100%;
height: 100%;
background: transparent;
}
</style>
\ No newline at end of file
src/views/right5/right-component5.vue 0 → 100644
<template>
<div class="right-component5">
<div class="right-box">
<h3 class="list-title">水上巴士运行</h3>
<div class="list-point">
<span><i style="background-color: #22ef3a"></i> 运营中</span>
<span><i style="background-color: #b6b6b6"></i>停航</span>
<span><i style="background-color: #f42b2b"></i>告警</span>
</div>
<div class="list-content">
<div class="list-item">
<img src="./../../assets/images/boa1.png" alt="" />
<div>5号小船</div>
</div>
<div class="list-item">
<img src="./../../assets/images/boa3.png" alt="" />
<div>5号小船</div>
</div>
<div class="list-item">
<img src="./../../assets/images/boa2.png" alt="" />
<div>5号小船</div>
</div>
<div class="list-item">
<img src="./../../assets/images/boa1.png" alt="" />
<div>5号小船</div>
</div>
<div class="list-item">
<img src="./../../assets/images/boa1.png" alt="" />
<div>5号小船</div>
</div>
<div class="list-item">
<img src="./../../assets/images/boa2.png" alt="" />
<div>5号小船</div>
</div>
<div class="list-item">
<img src="./../../assets/images/boa1.png" alt="" />
<div>5号小船</div>
</div>
<div class="list-item">
<img src="./../../assets/images/boa3.png" alt="" />
<div>5号小船</div>
</div>
<div class="list-item">
<img src="./../../assets/images/boa1.png" alt="" />
<div>5号小船</div>
</div>
</div>
</div>
<div class="right-box">
<h3 class="list-title">告警信息</h3>
<div class="list-table">
<div class="table-title">
<span>巴士</span>
<span>报警等级</span>
<span>处理状态</span>
<span>时间</span>
</div>
<div class="table-content">
<div class="table-line">
<div class="bus">
<img src="./../../assets/images/boa3.png" alt="" />
<p>5号小船</p>
</div>
<span>紧急</span>
<span>未处理</span>
<span>2020-11-09 12:11:00</span>
</div>
<div class="table-line">
<div class="bus">
<img src="./../../assets/images/boa3.png" alt="" />
<p>5号小船</p>
</div>
<span>紧急</span>
<span>未处理</span>
<span>2020-11-09 12:11:00</span>
</div>
<div class="table-line">
<div class="bus">
<img src="./../../assets/images/boa3.png" alt="" />
<p>5号小船</p>
</div>
<span>紧急</span>
<span>未处理</span>
<span>2020-11-09 12:11:00</span>
</div>
<div class="table-line">
<div class="bus">
<img src="./../../assets/images/boa3.png" alt="" />
<p>5号小船</p>
</div>
<span>紧急</span>
<span>未处理</span>
<span>2020-11-09 12:11:00</span>
</div>
<div class="table-line">
<div class="bus">
<img src="./../../assets/images/boa3.png" alt="" />
<p>5号小船</p>
</div>
<span>紧急</span>
<span>未处理</span>
<span>2020-11-09 12:11:00</span>
</div>
<div class="table-line">
<div class="bus">
<img src="./../../assets/images/boa3.png" alt="" />
<p>5号小船</p>
</div>
<span>紧急</span>
<span>未处理</span>
<span>2020-11-09 12:11:00</span>
</div>
</div>
</div>
</div>
<div class="right-box2">
<h3 class="list-title">监控情况</h3>
<div class="monitor">
<div class="monitor-bg"></div>
<div class="monitor-bg"></div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
};
</script>
<style lang="scss">
.right-component5 {
width: 600px;
height: 960px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
color: #fff;
padding: 16px;
.list-title {
font-size: 18px;
color: #47f1f0;
margin-bottom: 16px;
.short-title {
font-size: 10px;
color: #ffffff;
float: right;
}
}
.right-box {
.list-point {
display: flex;
justify-content: flex-end;
span {
margin: 0 8px;
}
i {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
vertical-align: middle;
margin: 0 4px;
}
}
.list-content {
display: flex;
flex-wrap: wrap;
.list-item {
margin: 3%;
div {
text-align: center;
}
}
}
.list-table {
.table-title {
span {
display: inline-block;
width: 25%;
text-align: center;
color: #2fa7eb;
}
}
.table-conetent {
}
.table-line {
display: flex;
align-items: center;
.bus {
width: 25%;
display: inline-block;
text-align: center;
img {
width: 30px;
}
}
background: rgba(158, 25, 31, 0.6);
border: 1px solid #9e191f;
padding: 2px 0;
margin: 8px 0;
span {
display: inline-block;
width: 25%;
text-align: center;
em {
color: #47f1f0;
}
}
span:nth-child(1) {
color: #f9c741;
}
}
}
}
.right-box2 {
.monitor {
display: flex;
justify-content: space-between;
.monitor-bg {
width: 48%;
height: 200px;
background-image: url("./../../assets/images/未标题-1_55.png");
background-size: 100% 100%;
background-position: center;
}
}
}
}
</style>
\ No newline at end of file
src/views/tianqi.vue 0 → 100644
<template>
<div class="tianqi">
<img src="./../assets/images/a123.png" alt="">
<div class="tianqi-font">2020/11/22 星期二 10:11:24</div>
</div>
</template>
<script>
export default {
};
</script>
<style lang="scss">
.tianqi{
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 32px;
.tianqi-font{
font-size: 20px;
}
}
</style>
\ No newline at end of file
src/views/top/top-component1.vue 0 → 100644
<template>
<div class="top-component">
<div class="top-title">
<img src="./../../assets/images/兰州_03.png" alt="" />
</div>
<div class="top-list">
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 公交车</span>
</p>
<p>
<span> 在线车辆数<em>20016</em>辆 </span>
<span> 总车辆数<em>30600</em>辆 </span>
</p>
</div>
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 出租车</span>
</p>
<p>
<span> 在线车辆数<em>210016</em>辆 </span>
<span> 总车辆数<em>265600</em>辆 </span>
</p>
</div>
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 自行车</span>
</p>
<p>
<span> 在线车辆数<em>180162</em>辆 </span>
<span> 总车辆数<em>305600</em>辆 </span>
</p>
</div>
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 水上巴士</span>
</p>
<p>
<span> 在线车辆数<em>2016</em>辆 </span>
<span> 总车辆数<em>3600</em>辆 </span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="scss">
.top-component {
display: flex;
justify-content: center;
flex-wrap: wrap;
.top-list {
width: 100%;
margin-top: 5%;
background-image: url("./../../assets/images/兰州_30.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
color: #ffffff;
display: flex;
justify-content: space-between;
.l-item {
p {
text-align: center;
margin: 10px 0;
> span {
margin: 0 10px;
em {
color: #37dbfe;
font-size: 18px;
margin: 0 2px;
}
}
}
.l-item-span {
color: #37dbfe;
font-size: 18px;
}
.l-item-bg {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("./../../assets/images/兰州_07.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
}
</style>
\ No newline at end of file
src/views/top/top-component2.vue 0 → 100644
<template>
<div class="top-component2">
<div class="top-title">
<img src="./../../assets/images/兰州_03.png" alt="" />
</div>
<div class="top-list">
<div class="l-item">
<p><i class="l-item-bg"></i> <span class="l-item-span"> 离线</span></p>
<p>
<span><em>48</em>辆 </span>
</p>
</div>
<div class="l-item">
<p><i class="l-item-bg"></i> <span class="l-item-span"> 空驾</span></p>
<p>
<span><em>18</em>辆 </span>
</p>
</div>
<div class="l-item">
<p><i class="l-item-bg"></i> <span class="l-item-span"> 载客</span></p>
<p>
<span> <em>54</em>辆 </span>
</p>
</div>
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 总车数</span>
</p>
<p>
<span> <em>54</em>辆 </span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="scss">
.top-component2 {
display: flex;
justify-content: center;
flex-wrap: wrap;
.top-list {
width: 100%;
margin-top: 5%;
background-image: url("./../../assets/images/兰州_30.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
color: #ffffff;
display: flex;
justify-content: space-around;
.l-item {
p {
text-align: center;
margin: 10px 0;
> span {
margin: 0 10px;
em {
color: #37dbfe;
font-size: 18px;
margin: 0 2px;
}
}
}
.l-item-span {
color: #37dbfe;
font-size: 18px;
}
.l-item-bg {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("./../../assets/images/兰州_07.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
}
</style>
\ No newline at end of file
src/views/top/top-component3.vue 0 → 100644
<template>
<div class="top-component3">
<div class="top-title">
<img src="./../../assets/images/兰州_03.png" alt="" />
</div>
<div class="top-list">
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 上行车辆</span>
</p>
<p>
<span><em>48</em>辆 </span>
</p>
</div>
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 下行车辆</span>
</p>
<p>
<span><em>18</em>辆 </span>
</p>
</div>
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 停运车辆</span>
</p>
<p>
<span> <em>54</em>辆 </span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="scss">
.top-component3 {
display: flex;
justify-content: center;
flex-wrap: wrap;
.top-list {
width: 100%;
margin-top: 5%;
background-image: url("./../../assets/images/兰州_30.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
color: #ffffff;
display: flex;
justify-content: space-around;
.l-item {
p {
text-align: center;
margin: 10px 0;
> span {
margin: 0 10px;
em {
color: #37dbfe;
font-size: 18px;
margin: 0 2px;
}
}
}
.l-item-span {
color: #37dbfe;
font-size: 18px;
}
.l-item-bg {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("./../../assets/images/兰州_07.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
}
</style>
\ No newline at end of file
src/views/top/top-component4.vue 0 → 100644
<template>
<div class="top-component3">
<div class="top-title">
<img src="./../../assets/images/兰州_03.png" alt="" />
</div>
<div class="top-list">
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 可还车桩</span>
</p>
<p>
<span><em>48</em>辆 </span>
</p>
</div>
<div class="l-item">
<p><i class="l-item-bg"></i> <span class="l-item-span"> 在线</span></p>
<p>
<span><em>18</em>辆 </span>
</p>
</div>
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 总车数</span>
</p>
<p>
<span> <em>54</em>辆 </span>
</p>
</div>
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 总站点数</span>
</p>
<p>
<span> <em>542</em>辆 </span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="scss">
.top-component3 {
display: flex;
justify-content: center;
flex-wrap: wrap;
.top-list {
width: 100%;
margin-top: 5%;
background-image: url("./../../assets/images/兰州_30.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
color: #ffffff;
display: flex;
justify-content: space-around;
.l-item {
p {
text-align: center;
margin: 10px 0;
> span {
margin: 0 10px;
em {
color: #37dbfe;
font-size: 18px;
margin: 0 2px;
}
}
}
.l-item-span {
color: #37dbfe;
font-size: 18px;
}
.l-item-bg {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("./../../assets/images/兰州_07.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
}
</style>
\ No newline at end of file
src/views/top/top-component5.vue 0 → 100644
<template>
<div class="top-component5">
<div class="top-title">
<img src="./../../assets/images/兰州_03.png" alt="" />
</div>
<div class="top-list">
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 在线</span>
</p>
<p>
<span><em>48</em>辆 </span>
</p>
</div>
<div class="l-item">
<p><i class="l-item-bg"></i> <span class="l-item-span"> 告警</span></p>
<p>
<span><em>18</em>辆 </span>
</p>
</div>
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 离线</span>
</p>
<p>
<span> <em>54</em>辆 </span>
</p>
</div>
<div class="l-item">
<p>
<i class="l-item-bg"></i> <span class="l-item-span"> 总船数</span>
</p>
<p>
<span> <em>542</em>辆 </span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="scss">
.top-component5 {
display: flex;
justify-content: center;
flex-wrap: wrap;
.top-list {
width: 100%;
margin-top: 5%;
background-image: url("./../../assets/images/兰州_30.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
color: #ffffff;
display: flex;
justify-content: space-around;
.l-item {
p {
text-align: center;
margin: 10px 0;
> span {
margin: 0 10px;
em {
color: #37dbfe;
font-size: 18px;
margin: 0 2px;
}
}
}
.l-item-span {
color: #37dbfe;
font-size: 18px;
}
.l-item-bg {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("./../../assets/images/兰州_07.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
}
</style>
\ No newline at end of file
vue.config.js 0 → 100644
/**
* Created on Tang 2018/2/14.
*/
// vue.config.js
const path = require("path");
const resolve = (dir) => path.join(__dirname, dir); // 路径
const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
runtimeCompiler: true,
// 部署应用包时的基本 URL Default: '/'
publicPath: "./",
// (build)放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 Default: ''
assetsDir: "assets",
// 默认在生成的静态资源文件名中包含hash以控制缓存，如果你无法使用 Vue CLI 生成的 index HTML时候可以设为false
filenameHashing: true,
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 的选项配置
devServer: {
host: "0.0.0.0",
port: 8090,
hot: true, // 开启热更新
hotOnly: false,
overlay: true, // 开启报错提示显示在浏览器遮罩层
https: false, // 是否开启https模式
/* 请求代理服务器
proxy: {
'/mapi': {
target: 'http://10.101.80.187:8080',
pathRewrite: { // 在发出请求后将/api替换为''空值，这样不影响接口请求
'^/mapi': ''
},
changeOrigin: true
}
}
*/
},
// 简单配置,这个配置内容将会在最后的时候使用webpack-merge合并到最终配置中 (配置插件plugins)
configureWebpack: (config) => {
if (process.env.NODE_ENV === "production") {
/* let optimization = {
runtimeChunk: "single",
splitChunks: {
chunks: "all",
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace("@", "")}`;
},
},
},
},
// 具体代码
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true,
sourceMap: true,
terserOptions: {
warnings: false,
compress: {
drop_console: true, // 注释console
drop_debugger: true, // 注释debugger
pure_funcs: ["console.log"],
},
},
}),
],
}; */
const plugins = [];
// 为生产环境修改配置...
plugins.push(
// 开启gzip压缩,大幅提高加载速度,同时需要nginx(其他服务器)也配置开启gzip(可以百度)
new CompressionWebpackPlugin({
algorithm: "gzip",
test: new RegExp("\\.(js|css)$"),
threshold: 10240,
minRatio: 0.8,
})
);
config.plugins = [...config.plugins, ...plugins];
} else {
// 为开发环境修改配置...
}
},
// 配置相关loader，支持修改，添加和替换相关的loader
chainWebpack: (config) => {
// 添加别名
config.resolve.alias.set("src", resolve("src"));
config.resolve.alias.set("api", resolve("src/api"));
},
};
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论